<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<p>第一种：</p>
<input id="test" type="file">
<br><br><br><br><br>
<p>第二种：</p>
<input id="test2" type="file">
<img id="preview">
<script>
(function(doc) {
'use strict';
// 第一种方法
doc.getElementById("test").addEventListener("change", function() {
console.time("userTime");
var img = new Image();
// 图片加载完成，释放路径
img.onload = function() {
window.URL.revokeObjectURL(this.src);
console.timeEnd("userTime");
}
// 显示图片
doc.getElementById("preview").src = img.src = window.URL.createObjectURL(this.files[0]);
});
// 第二种
doc.getElementById("test2").addEventListener("change", function() {
console.time("userTime");
var fileReader = new FileReader();
// 读取完成
fileReader.onload = function() {
doc.getElementById("preview").src = this.result;
console.timeEnd("userTime");
}
// 读取图片
fileReader.readAsDataURL(this.files[0]);
});
})(document);
</script>
</body>
</html>
timelessmemory
- 浏览: 4646 次
- 性别:
- 来自: 常州
-
最新评论
相关推荐
在H5应用中，图片上传和预览功能是常见的需求，尤其在PC和移动设备上都需要支持。这个功能涉及到前端开发中的多个技术点，包括HTML5的File API、Canvas、AJAX以及响应式设计等。下面将详细讲解实现这一功能所涉及的...
通过以上步骤，我们可以创建一个功能完备且具有良好用户体验的H5图片上传控件。需要注意的是，尽管前端实现了大部分功能，但后台服务器也需要支持接收并处理这些文件，通常涉及文件存储、权限控制、安全验证等方面。...
在这个项目中，我们探讨的是如何通过H5页面直接将图片上传到阿里云OSS，并实现在网页上预览这些上传的图片。 首先，我们需要了解阿里云OSS的API接口和SDK。阿里云提供了多种语言的SDK，包括JavaScript，方便我们在...
在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...
在移动H5应用中，图片上传预览功能是常见的需求，尤其在社交、电商或个人资料编辑等场景中。为了实现这一功能，开发者通常会利用HTML5提供的API，特别是FileReader接口，配合base64编码技术，来实现本地图片的预览。...
综上所述，"上传图片例子 H5"可能涵盖了从用户选择图片、预览图片、异步上传到错误处理的一系列流程。`uploadFileDemo`可能包含了一个完整的图片上传示例代码，供开发者参考学习。理解并掌握这些知识点对于构建自己...
【标题】"kindeditor多图上传H5版" 涉及的知识点： 1. **KindEditor**：KindEditor是一款开源的JavaScript富文本编辑器，它提供了丰富的API和可定制的功能，广泛应用于网页内容编辑。在传统的KindEditor中，图片...
本教程将深入探讨如何使用H5实现图片上传功能，以及相关的核心技术与实践策略。 一、HTML5 File API HTML5引入了File API，它允许开发者在浏览器环境中读取、处理和操作本地文件。File API包括FileReader、...
在IT行业中，H5图片上传插件是一种广泛应用于网页端的组件，它使得用户能够在浏览器上方便快捷地上传图片。这种插件对于个人资料编辑、社交媒体互动、在线表单提交等场景尤其重要，因为它简化了图片处理流程，提高了...
1. **Flash批量上传图片向H5上传的转变**： 随着Flash技术的逐渐淘汰，将KindEditor中原有的基于Flash的图片批量上传方式替换为H5（HTML5）上传，这是一个必要的优化步骤。HTML5引入了File API，使得在浏览器中处理...
在Java开发中，图片上传、预览、剪切和缩放是常见的功能需求，尤其在Web应用中。这里，我们主要探讨如何实现这些功能，并基于`swfupload`这个库来构建一个完整的解决方案。 首先，`swfupload`是一个古老的Flash上传...
这需要监听编辑器的`paste`事件，解析HTML内容中的图片URL，然后使用之前提到的H5上传机制将图片上传。 “粘贴时自动上传截图”则需要额外的处理，因为截图通常是二进制数据，我们需要捕获截图的事件（比如在Chrome...
本文将详细探讨如何使用H5技术实现图片的读取、裁剪和上传功能，这对于许多社交媒体、电子商务和个人博客网站来说是至关重要的特性。 首先，我们要理解H5中的File API，这是一个允许网页访问本地文件系统的API。...
代码片段： for (var i = 0; i ; i ) { speed_setting[i].addEventListener("click", function() { for (var i = 0; i ; i ) { if (speed_setting[i].checked) { setSnakeSpeed(speed_... }
在开发Web应用或移动H5页面时，常常需要实现图片查看和轮播的效果，以便用户可以轻松浏览一组图片。在这一领域，有两个知名的JavaScript插件备受开发者青睐：PhotoSwipe和SuperSlide。这两个插件都提供了丰富的功能...
3. **预览图片**：可以在Canvas上绘制Data URL，实现图片预览。 4. **图片压缩**：使用Canvas的`drawImage`方法将图片绘制到Canvas上，然后通过`toDataURL`方法以更低的质量（例如，设置`quality`参数）重新导出为...
这个html文件用html5实现了本地图片上传，在上传服务器前回显预览的功能
3. 图片预览：对于图片文件，可以在上传前进行预览，增加用户确认环节。 通过以上步骤，我们可以成功地将PHPCMS的Flash上传方式转变为H5上传，既提升了用户体验，也符合现代网络技术的发展趋势。在实际操作中，可能...
4. **jquery.ad-gallery.js**：这可能是一个图片画廊插件，虽然不是直接用于文件上传，但可以用于预览上传的图片。 5. **swfobject.js**：这是一个用于检测和嵌入Flash的JavaScript库，由于我们要移除Flash，这个...
在.NET技术框架下，开发移动端应用时，常常需要实现用户在手机端通过H5页面上传图片的功能。这个".net手机端移动端多图片h5上传案例...通过分析和学习这个示例，开发者可以快速掌握.NET环境下H5多图片上传的实现方式。