HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传

这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条的修改版本。后台代码不变就可以接着使用，但是脚本不再使用jQuery了，改为原生的 JavaScript 代码，所以我们主要看JS代码

页面技术：HTML5

后台技术：Servlet 3.0

服务器：Tomcat 7.0

脚本：JavaScript

HTML5 file组件的新属性

accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。

multiple：是否允许选择多个文件

HTML5 页面代码修改后

<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>

accept 的值可以参阅：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)

    }

}

既然可以循环多文件的话，就可以尝试多文件上传了。

1、首先创建 XMLHttpRequest 对象

//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本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: 这毕竟只是基本功能的演示示例，离公司使用的要求还相差十万八千里，请谨慎在公司平台使用。

秒客网

HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传

相关文章