HTML5实现多张图片上传功能


Posted in HTML / CSS onMarch 11, 2016

图片上传之前也有写过,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下

HTML结构:

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.     <label>请选择一个图像文件:</label>  
  3.     <input type="file" id="file_input" multiple/>  
  4. </div>  

顺便说下这个上传的主要逻辑:

·用input标签并选择type=file,记得带上multiple,不然就只能单选图片了

·绑定好input的change时间,

·重点就是如何处理这个change事件了,使用H5新的FileReader接口读取文件并打成base64编码,之后的事就是与后端同学交互着玩啦

JS代码:

JavaScript Code复制内容到剪贴板
  1. window.onload = function(){   
  2.         var input = document.getElementById("file_input");   
  3.         var result,div;   
  4.     
  5.         if(typeof FileReader==='undefined'){   
  6.             result.innerHTML = "抱歉,你的浏览器不支持 FileReader";   
  7.             input.setAttribute('disabled','disabled');   
  8.         }else{   
  9.             input.addEventListener('change',readFile,false);   
  10.         }<br>

     

    //handler   
  11.         function readFile(){   
  12.             for(var i=0;i<this.files.length;i++){   
  13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){//判断上传文件格式   
  14.                     return alert("上传的图片格式不正确,请重新选择")<br>

    }   

  15.                 var reader = new FileReader();   
  16.                 reader.readAsDataURL(this.files[i]);   
  17.                 reader.onload = function(e){   
  18.                     result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';   
  19.                     div = document.createElement('div');   
  20.                     div.innerHTML = result;   
  21.                     document.getElementById('body').appendChild(div);  //插入dom树                      <br>

    }

      
  22.             }   
  23.         }   
  24.     }   

上传多张图片难道就这样实现了吗0.0

然而并没有,这样只是将图片转换成base64编码后再前端显示,一刷新什么都没有

插入图片后,打开开发者工具看html结构是这样的

 HTML5实现多张图片上传功能

现实的做法是,我们在处理函数里将文件队列里的文件发送到后端,后端同学呢返回文件对应的MD5加密过文件和路径给前端,前端就拿着这个路径渲染到页面上。

之后再把MD5文件传回给后端,因为上传完后前端一般有删除图片的操作,回传目的就是告诉后端确认那些图片是我们想要的,后端存入数据库里。

说下用jquery如何交互吧

JavaScript Code复制内容到剪贴板
  1. function readFile(){   
  2.             var fd = new FormData();   
  3.             for(var i=0;i<this.files.length;i++){   
  4.                 var reader = new FileReader();   
  5.                 reader.readAsDataURL(this.files[i]);   
  6.                 fd.append(i,this.files[i]);<br>

      }   

  7.                 $.ajax({   
  8.                     url : '',   
  9.                     type : 'post',   
  10.                     data : fd,   
  11.                     success : function(data){   
  12.                         console.log(data)   
  13.                    }    
  14.                 })   
  15. }      

FormData也是H5的新接口,用来模拟表单控件的提交,最大的好处呢就是可以提交二进制文件

然后success的回调里面我们拿回了想要的数据后呢,就可以将图片插进去页面啦,类似之前的做法~

上个效果图:

HTML5实现多张图片上传功能

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/weapon-x/p/5237064.html

HTML / CSS 相关文章推荐
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 #HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 #HTML / CSS
HTML5的新特性(1)
Mar 03 #HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 #HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 #HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 #HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 #HTML / CSS
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
javascript实现数字时钟效果
2021/02/06 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python创建数字列表的示例
2019/11/28 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
甜品店创业计划书
2014/09/21 职场文书
生日寿星公答谢词
2015/09/29 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
Nginx配置https的实现
2021/11/27 Servers