zoukankan      html  css  js  c++  java

  • HTML5 jQuery+FormData 异步上传文件，带进度条

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <link href="../resources/css/common.css" rel="stylesheet" />  
    6.     <script src="../resources/js/jquery-2.1.4.js"></script>  
    7.       
    8. </head>  
    9.   
    10. <body>  
    11.     <h2>HTML5异步上传文件，带进度条</h2>  
    12.     <form method="post" enctype="multipart/form-data">  
    13.         其他需要提交的信息：<input type="text" name="otherInfo"/><br/><br/>  
    14.         选择要上传的文件：<br/>  
    15.         <input type="file" name="file" /><span></span><br/>  
    16.         <input type="file" name="file" /><span></span><br/>  
    17.     </form>  
    18.       
    19.     <br/><br/>  
    20.     <input type="button" value="上传吧" onclick="upload()"/>  
    21.     <br/><br/>  
    22.     上传进度：<progress></progress><br/>  
    23.     <p id="progress">0 bytes</p>  
    24.     <p id="info"></p>  
    25. </body>  
    26. <script>  
    27. var totalSize = 0;  
    28. //绑定所有type=file的元素的onchange事件的处理函数  
    29.   $(':file').change(function() {  
    30.  var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了  
    31.         name = file.name;  
    32.         size = file.size;  
    33.         type = file.type;  
    34.         url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片  
    35.         $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);  
    36.         totalSize += size;  
    37.         $("#info").html("总大小: " + totalSize + "bytes");  
    38.     });  
    39. function upload() {  
    40. //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");  
    41. var formData = new FormData($('form')[0]);  
    42. //ajax异步上传  
    43.         $.ajax({  
    44.             url: "http://localhost:8080/MyJavaStudio/servlet/file/upload",  
    45.             type: "POST",  
    46.             data: formData,  
    47.             xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数  
    48.                 myXhr = $.ajaxSettings.xhr();  
    49.             if(myXhr.upload){ //检查upload属性是否存在  
    50.             //绑定progress事件的回调函数  
    51.                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);   
    52.                 }  
    53.              return myXhr; //xhr对象返回给jQuery使用  
    54.             },  
    55.             success: function(result){  
    56.                 $("#result").html(result.data);  
    57.             },  
    58.             contentType: false, //必须false才会自动加上正确的Content-Type  
    59.             processData: false  //必须false才会避开jQuery对 formdata 的默认处理  
    60.         });  
    61.     }         
    62. //上传进度回调函数：  
    63. function progressHandlingFunction(e) {  
    64.     if (e.lengthComputable) {  
    65.             $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条  
    66.             var percent = e.loaded/e.total*100;  
    67.             $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");  
    68.         }  
    69.     }  
    70. </script>  
    71. </html>  
     

     
  • 相关阅读:
    Remove Duplicates from Sorted List II [LeetCode]
    Valid Palindrome [LeetCode]
    Merge Sorted Array [LeetCode]
    Binary Tree Postorder Traversal
    Subsets [LeetCode]
    Search for a Range [LeetCode]
    Reorder List [LeetCode]
    GCC 默认用哪个标准
    18 组装类举例
    17 实例方法、静态方法、类方法
  • 原文地址：https://www.cnblogs.com/tyqing/p/5995538.html
Copyright © 2011-2022 走看看