前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了。(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习)。移动端完全支持哦!已测试。

下面给大家看看代码吧怎么实现的

第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能)

  1. <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this)">
  2. <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的资料,有自己查下。

如有不明白请查看注解,或者给我留言都可以的。

注解:

这里我们就说一下思路吧(我自己的理解):

  1. 首先 img.src = window.URL.createObjectURL(files[0]) 是我们创建的本地路径,为了本地预览而设置的。
  2. 第二我们就涉及到了H5上传那么我们第一步就是读出来这个图片的信息 reader.onload 这个方法就是读取img的信息数据
  3. 当读取成功就可以调用上传的后台接口,来处理文件上传到什么位置了。
  1. <script>
  2. window.URL = window.URL || window.webkitURL;
  3. var fileElem = document.getElementById("fileElem"),
  4. fileList = document.getElementById("fileList");
  5. function handleFiles(obj) {
  6. var files = obj.files,
  7. img = new Image();
  8. if(window.URL){
  9. //File API
  10. alert(files[0].name + "," + files[0].size + " bytes");
  11. img.src = window.URL.createObjectURL(files[0]); //创建一个object URL,并不是你的本地路径
  12. img.width = 200;
  13. img.onload = function(e) {
  14. window.URL.revokeObjectURL(this.src); //图片加载后,释放object URL
  15. }
  16. fileList.appendChild(img);
  17. }else if(window.FileReader){
  18. //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
  19. var reader = new FileReader();
  20. reader.readAsDataURL(files[0]);
  21. reader.onload = function(e){
  22. alert(files[0].name + "," +e.total + " bytes");
  23. img.src = this.result;
  24. img.width = 200;
  25. fileList.appendChild(img);
  26. }
  27. }else{
  28. //ie
  29. obj.select();
  30. obj.blur();
  31. var nfile = document.selection.createRange().text;
  32. document.selection.empty();
  33. img.src = nfile;
  34. img.width = 200;
  35. img.onload=function(){
  36. alert(nfile+","+img.fileSize + " bytes");
  37. }
  38. fileList.appendChild(img);
  39. }
  40. }
  41. </script>

PS: :大家在用的时候有什么问题及时给我反馈,我写的肯定不是做好的,其实我想学习一下可以多张上传的功能。但是现阶段只能分享到这里了。

【小月博客】用HTML5的File API做上传图片预览功能的更多相关文章

  1. 关于H5里的API,上传图片预览功能

    FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...

  2. 【小月博客】 Html5 上传图片 移动端、PC端通用

    在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但 ...

  3. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  4. HTML5时代的纯前端上传图片预览及严格图片格式验证函数(转载)

    原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代 ...

  5. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  6. Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册

    头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...

  7. 通过file文件选择图片预览功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML5拖放事件-上传图片预览功能

    主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...

  9. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

随机推荐

  1. C++复现经典游戏——扫雷

    国庆小长假,当大家都去看人山人海的时候,我独自一人狂码代码.这两天想要实现的内容是Windows上的一个经典游戏——扫雷.相信90后和一些上班族对此并不陌生.然而,从win8开始,扫雷就不再是Wind ...

  2. sdutoj 2608 Alice and Bob

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2608 Alice and Bob Time L ...

  3. bzoj2424 [HAOI2010]订货

    模拟一下仓库里面存储物品的价格情况即可,如果当前物品大于仓库里面物品那么就替换一下仓库里的物品,然后订货直接从仓库里先取,仓库里不够则直接购买,每次做完后记得买当前物品填补一下仓库直至仓库填满,当然这 ...

  4. Android -- 自定义View小Demo,绘制四位数随机码(一)

    1,现在有这样一个需求,实现显示随机随机数可能在代码中直接很简单的就实现了,但是现在我们直接自定义View来实现这个效果,那么我们来分析一波吧,我们允许开发者自己设置这个textview的大小,颜色, ...

  5. My roadway of compilers principles.

    龙书学习过程代码记录--Python3.5(毕竟第一遍看书,书里面的例子全用python写的) One 将中缀表达式翻译成后缀表达式↓ class Parser(object): def __init ...

  6. 前端开发--css属性书写顺序

    css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...

  7. mysql 一些基础的语法和命令

    语法: SELECT 属性列表       FROM 表名或视图名       [ WHERE 条件表达式1 ]       [ GROUP BY 属性名1 [ HAVING 条件表达式2 ] [ W ...

  8. 使用Python一步一步地来进行数据分析总结

    原文链接:Step by step approach to perform data analysis using Python译文链接:使用Python一步一步地来进行数据分析--By Michae ...

  9. Doolitter分解 三对角矩阵分解 拟三对角分解

    #include <cstdio> #include <cstdlib> #include <algorithm> #include <cmath> # ...

  10. C++string中有关大小和容量的函数浅析

    1.length()与size() length是因为沿用C语言的习惯而保留下来的,string类最初只有length,引入STL之后,为了兼容又加入了size,它是作为STL容器的属性存在的,便于符 ...