【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了。(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习)。移动端完全支持哦!已测试。
下面给大家看看代码吧怎么实现的
第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能)
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this)">
<div id="fileList" style="width:200px;height:200px;"></div>
注:如果想写成很漂亮的那种上传按钮,告诉大家我的写法就是模拟上传,即在input下面决定定位一张图片(上传按钮),input的宽高和图片色值一样大小,透明度为0 ,最后别忘记涉及z-index的顺序。
第二:JS利用H5新功能处理上传
Js实现图片上传前的预览功能,主要是使用html5 的 Files API 实现,ie可兼容部分功能,在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept ,前一个属性可控制多文件选择,后一个控制上传的文件类型。预了解更多关于File API的资料,有自己查下。
如有不明白请查看注解,或者给我留言都可以的。
注解:
这里我们就说一下思路吧(我自己的理解):
- 首先 img.src = window.URL.createObjectURL(files[0]) 是我们创建的本地路径,为了本地预览而设置的。
- 第二我们就涉及到了H5上传那么我们第一步就是读出来这个图片的信息 reader.onload 这个方法就是读取img的信息数据
- 当读取成功就可以调用上传的后台接口,来处理文件上传到什么位置了。
<script>
window.URL = window.URL || window.webkitURL;
var fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
function handleFiles(obj) {
var files = obj.files,
img = new Image();
if(window.URL){
//File API
alert(files[0].name + "," + files[0].size + " bytes");
img.src = window.URL.createObjectURL(files[0]); //创建一个object URL,并不是你的本地路径
img.width = 200;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src); //图片加载后,释放object URL
}
fileList.appendChild(img);
}else if(window.FileReader){
//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
alert(files[0].name + "," +e.total + " bytes");
img.src = this.result;
img.width = 200;
fileList.appendChild(img);
}
}else{
//ie
obj.select();
obj.blur();
var nfile = document.selection.createRange().text;
document.selection.empty();
img.src = nfile;
img.width = 200;
img.onload=function(){
alert(nfile+","+img.fileSize + " bytes");
}
fileList.appendChild(img);
}
}
</script>
PS: :大家在用的时候有什么问题及时给我反馈,我写的肯定不是做好的,其实我想学习一下可以多张上传的功能。但是现阶段只能分享到这里了。
【小月博客】用HTML5的File API做上传图片预览功能的更多相关文章
- 关于H5里的API,上传图片预览功能
FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...
- 【小月博客】 Html5 上传图片 移动端、PC端通用
在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但 ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- HTML5时代的纯前端上传图片预览及严格图片格式验证函数(转载)
原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代 ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册
头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5拖放事件-上传图片预览功能
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
随机推荐
- Leetcode: 132 Pattern
Given a sequence of n integers a1, a2, ..., an, a 132 pattern is a subsequence ai, aj, ak such that ...
- SpringMvc处理JSON
步骤如下: 1.加入jar包 2.编写目标方法,使其返回JSON对应的对象或集合 3.在方法上添加@ResponseBody注解 DispatcheServlet默认装配RequestMappingH ...
- 一个Demo学完Android中所有的服务(转)
说明:这个例子实现了Android中常见的许多服务,下面是实现的截图 接下来,以源代码的方式分析这个例子 1.MainActivity--主界面 这个类主要是实现用户所看到的这个Activity, ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- 【转】PowerShell入门(二):PowerShell是Cmd命令行的加强版吗?
转至:http://www.cnblogs.com/ceachy/archive/2013/01/31/PowerShell_vs_Cmd.html PowerShell是命令行的加强版吗?Power ...
- 关于Navigation的BarButtonItem的
(ios6.1)有两个controller在navigation stack里,A和B.A是B的previous view controller,现在top-level controller是B.要自 ...
- 用andtoid studio获取天气数据并解析适配
1.申请拿到数据 可以用“聚合数据” 2.在android studio中导入需要的jar包 复制—>app—>libs—>粘贴—>右击—>Add As Library… ...
- [课程设计]Scrum 2.3 多鱼点餐系统开发进度 (订单一览设计)
Scrum 2.3 多鱼点餐系统开发进度 (订单一览设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统 ...
- python高性能代码之多线程优化
以常见的端口扫描器为实例 端口扫描器的原理很简单,操作socket来判断连接状态确定主机端口的开放情况. import socket def scan(port): s = socket.socket ...
- django admin下拉列表不显示值,显示为object的处理
问题:模板中创建form表单中的下拉列表, 前台打开页面显示object,而不是值,如图: 尝试了多种办法无果,最后解决了,处理办法是修改models.py,原来的model: class Techn ...