基于javascript html5实现多文件上传


Posted in Javascript onMarch 03, 2016

本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下

HTML结构:

<div class="container">
 <label>请选择一个图像文件:</label>
 <input type="file" id="file_input" multiple/>
</div>

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

  • 用input标签并选择type=file,记得带上multiple,不然就只能单选图片了
  • 绑定好input的change时间,
  • 重点就是如何处理这个change事件了,使用H5新的FileReader接口读取文件并打成base64编码,之后的事就是与后端同学交互着玩啦

JS代码:

window.onload = function(){
  var input = document.getElementById("file_input");
  var result,div;
 
  if(typeof FileReader==='undefined'){
   result.innerHTML = "抱歉,你的浏览器不支持 FileReader";
   input.setAttribute('disabled','disabled');
  }else{
   input.addEventListener('change',readFile,false);
  }<br>
 //handler
  function readFile(){
   for(var i=0;i<this.files.length;i++){
    if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){
//判断上传文件格式
     return alert("上传的图片格式不正确,请重新选择")<br>




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




}
   }
  }
 }

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

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

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

 基于javascript html5实现多文件上传

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

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

说下用jquery如何交互吧

function readFile(){
   var fd = new FormData();
   for(var i=0;i<this.files.length;i++){
    var reader = new FileReader();
    reader.readAsDataURL(this.files[i]);
    fd.append(i,this.files[i]);<br>


  }
    $.ajax({
     url : '',
     type : 'post',
     data : fd,
     success : function(data){
      console.log(data)
      } 
    })
}

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

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

上个效果图:

基于javascript html5实现多文件上传

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

Javascript 相关文章推荐
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
vue构建单页面应用实战
Apr 10 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
js实现弹窗效果
Aug 09 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 #Javascript
JS获取当前脚本文件的绝对路径
Mar 02 #Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 #Javascript
浅谈JS原型对象和原型链
Mar 02 #Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 #Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 #Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 #Javascript
You might like
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python的词法分析与语法分析
2013/05/18 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
上海奥佳笔试题面试题
2016/11/16 面试题
蛋糕店创业计划书
2014/05/06 职场文书
学校文明单位申报材料
2014/05/06 职场文书
学校四风对照检查材料
2014/08/28 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Python读写yaml文件
2022/03/20 Python
Redis唯一ID生成器的实现
2022/07/07 Redis