HTML5結合ajax實現文件上傳以及進度顯示

時間 2019-11-15

標籤 html5 html 結合 ajax 實現文件上傳以及進度顯示欄目 HTML5 简体版

原文原文鏈接

基於原生html5實現，不須要falsh支持，進度能夠自定義顯示，控制靈活，原本打算使用jquery插件進行異步文件上傳，好比uploadfy可是須要額外的支持，也有人用iframe模仿異步上傳機制，感受都比較彆扭。由於項目不考慮低版本瀏覽器，因此決定用html5實現。下面只是一個簡單的demo，具體樣式須要本身去作。 javascript

後臺基於strut2進行文件處理，具體因項目而定。只是要注意設置文件大小的限制。 <constant name="struts.multipart.maxSize" value="52428800"/>這個配置根據具體狀況設定，超過此值會報404. php

首先是上傳頁面,比較簡單，附帶了文件上者這個參數。 html

upload.jsp html5

<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <title>使用XMLHttpRequest上傳文件</title>
    <script type="text/javascript">
    var xhr = new XMLHttpRequest();

    //監聽選擇文件信息
    function fileSelected() {
    //HTML5文件API操做
       var file = document.getElementById('fileName').files[0];
       if (file) {
         var fileSize = 0;
         if (file.size > 1024 * 1024)
           fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
         else
           fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';java

         document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
         document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
         document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
       }
    }

    //上傳文件
    function uploadFile() {
       var fd = new FormData();
       //關聯表單數據,能夠是自定義參數
       fd.append("name", document.getElementById('name').value);
       fd.append("fileName", document.getElementById('fileName').files[0]);jquery

       //監聽事件
       xhr.upload.addEventListener("progress", uploadProgress, false);
       xhr.addEventListener("load", uploadComplete, false);
       xhr.addEventListener("error", uploadFailed, false);
       xhr.addEventListener("abort", uploadCanceled, false);
       //發送文件和表單自定義參數
       xhr.open("POST", "<%=path%>/user/uploadifyTest_doUpload");
       xhr.send(fd);
    }
    //取消上傳
function cancleUploadFile(){
  xhr.abort();
}

    //上傳進度
    function uploadProgress(evt) {
       if (evt.lengthComputable) {
         var percentComplete = Math.round(evt.loaded * 100 / evt.total);
         document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
       }
       else {
         document.getElementById('progressNumber').innerHTML = 'unable to compute';
       }
    }數組

    //上傳成功響應
    function uploadComplete(evt) {
    //服務斷接收完文件返回的結果
    alert(evt.target.responseText);
    }

    //上傳失敗
    function uploadFailed(evt) {
    alert("上傳失敗");
    }
//取消上傳
    function uploadCanceled(evt) {
    alert("您取消了本次上傳.");
    }
    </script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
      <label for="fileToUpload">選擇文件</label>
<input type="file" name="fileName" id="fileName" onchange="fileSelected();"/>
    </div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
上傳者：<input type="text" name="name" id="name"/>
<input type="button" onclick="uploadFile()" value="上傳" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
    </div>
<div id="progressNumber"></div>
</form>瀏覽器

</body>
</html>app

fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);jquery插件

這兩句是把數據綁定到表單。由於html5支持多文件上傳，因此
document.getElementById('fileName').files返回的是數組。這裏只有一個文件因此取下標0的元素。
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);這裏綁定進度、上傳、錯誤、中斷的事件，提供一些交互。文件進度顯示就是在progress回調中進行顯示的。

而後貼上後臺代碼和action配置，UploadifyTestAction.java

 
       package  
       com.bjhit.eranges.actions.test; 
      
       import  
       java.io.File; 
      
       import  
       com.opensymphony.xwork2.ActionSupport; 
      
       public  
       class  
       UploadifyTestAction  
       extends  
       ActionSupport { 
      
       private  
       static  
       final  
       long  
       serialVersionUID = 837481714629791752L; 
      
       private  
       File fileName; 
      
       private  
       String name; 
      
       private  
       String responseInfo; 
      
       public  
       String doUpload()  
       throws  
       Exception { 
      
       System.out.println(name); 
      
       File myFile = fileName; 
      
       System.out.println(myFile.getName()); 
      
       responseInfo =  
       "上傳成功!" 
       ; 
      
       return  
       "doUpload" 
       ; 
      
       } 
      
       public  
       String getName() { 
      
       return  
       name; 
      
       } 
      
       public  
       void  
       setName(String name) { 
      
       this 
       .name = name; 
      
       } 
      
       public  
       File getFileName() { 
      
       return  
       fileName; 
      
       } 
      
       public  
       void  
       setFileName(File fileName) { 
      
       this 
       .fileName = fileName; 
      
       } 
      
       public  
       String getResponseInfo() { 
      
       return  
       responseInfo; 
      
       } 
      
       public  
       void  
       setResponseInfo(String responseInfo) { 
      
       this 
       .responseInfo = responseInfo; 
      
       } 
      
       }

action配置

 
       private ImageView image;     
      
       image = (ImageView) findViewById(R.id.xx_id);     
      
       image.setAlpha(0);

這樣基本的上傳功能了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。