zoukankan      html  css  js  c++  java
  • 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: 这毕竟只是基本功能的演示示例,离公司使用的要求还相差十万八千里,请谨慎在公司平台使用。

  • 相关阅读:
    JS继承
    Liunx 常用命令2
    团队作业(四)
    OpenEuler树莓派基础实验(无树莓派)
    thread同步测试
    团队作业(三)
    实验二测试
    浅谈JWT。
    monolog使用 brady
    Blazor Server获取Token访问外部Web Api
  • 原文地址:https://www.cnblogs.com/koleyang/p/4938807.html
Copyright © 2011-2022 走看看