源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

原生JavaScript实现异步多文件上传

  • 时间:2020-09-06 20:17 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:原生JavaScript实现异步多文件上传
这是在上篇的修改版本。后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的JavaScript 代码,所以我们主要看JS代码。 先介绍一下技术参数: 页面技术:HTML5 后台技术:Servlet 3.0 服务器:Tomcat 7.0 脚本:JavaScript [b]HTML5[/b] file组件的新属性 [b]accept : [/b]如果在file组件中增加这个属性就可以直接控制上传的文件类型了,实在是很方便。 [b]multiple:[/b]是否允许选择多个文件 [b]HTML5 页面代码修改后 [/b]
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
  <div id="son"></div>
</div>
[b]accept 的值可以参阅:[/b]IANA MIME 类型(标准 MIME 类型的完整列表),如果使用的是DW开发的话,软件本身就有提示。 如果选择了多个文件,可以用JS做循环打印,看看文件的名称,类型和大小,看演示代码
function printFileInfo(){
 
 var picFile = document.getElementById("pic"); 
 var files = picFile.files;
 for(var i=0; i<files.length; i++){
  var file = files[i];
  var div = document.createElement("div")
  div.innerHTML = "第("+ (i+1) +") 个文件的名字:"+ file.name +
  " , 文件类型:"+ file.type +" , 文件大小:"+ file.size 
  document.body.appendChild( div)
 }
}
既然可以循环多文件的话,就可以尝试多文件上传了。 [b]1、首先创建 XMLHttpRequest 对象[/b] //这是全局变量。因为是示例,所以就没有判断浏览器类型,低版本IE这么写的话会出问题的 var xhr = new XMLHttpRequest() 2、上篇介绍了进度事件(Progress) , 这次实现 progress 和 error 2个事件 error:在请求发生错误时触发。    对应上传时发生错误导致的上传失败:uploadFailed()
//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
  progress:在接收相应期间持续不断触发。

      对应上传进度方法:onprogress()
/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
 var loaded = evt.loaded;       //已经上传大小情况 
 var tot = evt.total;       //附件总大小 
 var per = Math.floor(100*loaded/tot);   //已经上传的百分比 
  $("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

最后就是上传方法了,注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
 //上传文件
function uploadFile() {
  //将上传的多个文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
   xhr.send(formData);
} 

PS: 这毕竟只是基本功能的演示示例,离公司使用的要求还相差十万八千里,请谨慎在公司平台使用。 大家可以结合这篇文章进行学习:[url=http://www.1sucai.cn/article/74264.htm]基于HTML5 Ajax文件上传进度条如何实现(jquery版本)[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部