【小月博客】用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 ...
随机推荐
- C++复现经典游戏——扫雷
国庆小长假,当大家都去看人山人海的时候,我独自一人狂码代码.这两天想要实现的内容是Windows上的一个经典游戏——扫雷.相信90后和一些上班族对此并不陌生.然而,从win8开始,扫雷就不再是Wind ...
- sdutoj 2608 Alice and Bob
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2608 Alice and Bob Time L ...
- bzoj2424 [HAOI2010]订货
模拟一下仓库里面存储物品的价格情况即可,如果当前物品大于仓库里面物品那么就替换一下仓库里的物品,然后订货直接从仓库里先取,仓库里不够则直接购买,每次做完后记得买当前物品填补一下仓库直至仓库填满,当然这 ...
- Android -- 自定义View小Demo,绘制四位数随机码(一)
1,现在有这样一个需求,实现显示随机随机数可能在代码中直接很简单的就实现了,但是现在我们直接自定义View来实现这个效果,那么我们来分析一波吧,我们允许开发者自己设置这个textview的大小,颜色, ...
- My roadway of compilers principles.
龙书学习过程代码记录--Python3.5(毕竟第一遍看书,书里面的例子全用python写的) One 将中缀表达式翻译成后缀表达式↓ class Parser(object): def __init ...
- 前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
- mysql 一些基础的语法和命令
语法: SELECT 属性列表 FROM 表名或视图名 [ WHERE 条件表达式1 ] [ GROUP BY 属性名1 [ HAVING 条件表达式2 ] [ W ...
- 使用Python一步一步地来进行数据分析总结
原文链接:Step by step approach to perform data analysis using Python译文链接:使用Python一步一步地来进行数据分析--By Michae ...
- Doolitter分解 三对角矩阵分解 拟三对角分解
#include <cstdio> #include <cstdlib> #include <algorithm> #include <cmath> # ...
- C++string中有关大小和容量的函数浅析
1.length()与size() length是因为沿用C语言的习惯而保留下来的,string类最初只有length,引入STL之后,为了兼容又加入了size,它是作为STL容器的属性存在的,便于符 ...