基于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 实现两级导航菜单附效果图
Mar 07 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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异步执行的常用方式详解
2013/06/03 PHP
php格式化金额函数分享
2015/02/02 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python自动连接ssh的方法
2015/03/07 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
django模板语法学习之include示例详解
2017/12/17 Python
django输出html内容的实例
2018/05/27 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
自荐信写法介绍
2014/01/25 职场文书
公民授权委托书范本
2014/09/17 职场文书
英文道歉信
2015/01/20 职场文书
绿里奇迹观后感
2015/06/15 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL