基于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 相关文章推荐
jquery简单体验
Jan 10 Javascript
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
用PHP制作的意见反馈表源码
2007/03/11 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php实现文件下载实例分享
2014/06/02 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php语法检查的方法总结
2019/01/21 PHP
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
python3调用R的示例代码
2018/02/23 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
疾病捐款倡议书
2014/05/13 职场文书
幸福来敲门观后感
2015/06/04 职场文书
告知书格式
2015/07/01 职场文书
小学班级标语口号大全
2015/12/26 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
新手入门Mysql--概念
2021/06/18 MySQL