二期項目總結（一） 經過a標籤打開文件上傳選擇框，使用Ajax上傳文件

 

不少時候咱們會給a標籤增長一個點擊事件，用於上傳文件。爲何不使用原滋原味的文本打開按鈕呢？固然是很差看，並且樣式難以控制。

這時候能夠經過控制a標籤，給它添加一個點擊事件，在a標籤觸發點擊事件的時候打開文本選擇框，就很好看了。

好了，如今來上思路：

先要給出一個a標籤和文本選擇的打開input，可是這個input的display要設置爲none， 以下：

<a id="uoloadA" onclick="ClickInput()">上傳文件</a>
    <input type="file" style="display:none" id="InputUpload" onchange="changeInput()"/>

a標籤有一個點擊方法，點擊時觸發這個方法，這個方法裏面用於打開文本選擇器，以下：

    function ClickInput(){
        //動態給文件打開框觸發點擊事件
        document.getElementById("InputUpload").click();
    }

 

這樣，一點擊a標籤就會打開文本選擇框，

input裏面有一個onchange的方法，用於監控文本選擇器的狀態，若是文本選擇器選擇了一個文件，就會觸發這個方法。那麼這個方法裏面寫的就是ajaxFileUpload的請求代碼了

以下：

//當文件選擇框改變時，就上傳文件，裏面發Ajax請求處處理層
    function changeInput(){
        $.ajaxFileUpload({
            fileElementId:'InputUpload',  //要上傳的文件的id
            url:'Upload.jsp',  //請求的地址，
            type:'post',        //請求的方式
            dataType:'text',    //返回數據時的格式，也能夠將Text改成json，這個要看具體需求 
             secureuri: false,  //是否須要安全協議，通常設置爲false
             
             async : true,      //是不是異步
             
             success: function(data) {   //提交成功後自動執行的處理函數，參數data就是服務器返回的數據。
                 if($.trim(data) != null){
                    alert("上傳成功！");
                 }
             },
             error: function(data, status, e) {  //提交失敗自動執行的處理函數。
                alert("上傳失敗！");
             }
        });
    }

這樣就能夠上傳一個文件處處理層，在處理層裏面經過smartUpload來處理，就能夠成功的上傳一個文件了。

 

 

 

一、url　　　　　　　　　　  上傳處理程序地址。　　
2，fileElementId　　　　　  須要上傳的文件域的ID，即<input type="file">的ID。
3，secureuri　　　　　　　 是否啓用安全提交，默認爲false。 
4，dataType　　　　　　　 服務器返回的數據類型。能夠爲xml,script,json,html。若是不填寫，jQuery會自動判斷。
5，success　　　　　　　　提交成功後自動執行的處理函數，參數data就是服務器返回的數據。
6，error　　　　　　　　　 提交失敗自動執行的處理函數。
7，data 　　　　　　　　　 自定義參數。這個東西比較有用，當有數據是與上傳的圖片相關的時候，這個東西就要用到了。
8, type 　　　　　　　　　  當要提交自定義參數時，這個參數要設置成post

錯誤提示:

1，SyntaxError: missing ; before statement錯誤
　　若是出現這個錯誤就須要檢查url路徑是否能夠訪問
2，SyntaxError: syntax error錯誤
　　若是出現這個錯誤就須要檢查處理提交操做的服務器後臺處理程序是否存在語法錯誤
3，SyntaxError: invalid property id錯誤
　　若是出現這個錯誤就須要檢查文本域屬性ID是否存在
4，SyntaxError: missing } in XML expression錯誤
　　若是出現這個錯誤就須要檢查文件name是否一致或不存在
5，其它自定義錯誤
　　你們可以使用變量$error直接打印的方法檢查各參數是否正確，比起上面這些無效的錯誤提示仍是方便不少。

 

 

 

 

 

接下來寫一下smartUpload的處理

 

我這個寫成了一個方法，但具體的內容差很少，

public String getMusicPath(PageContext pageContext){
        SmartUpload su = new SmartUpload();
        String filedName = "";
        try {
            
            su.initialize(pageContext);//初始化smartUpload
            
            su.setMaxFileSize(1024 *1024*30);  //設置傳送文件的大小
            
            su.setCharset("utf-8");  //設置編碼集

　　　　　　　su.setAllowedFilesList("mp3,mp4");  //設置要上傳的後綴,以數組的方式提交，中間用逗號隔開，固然也能夠只寫一個後綴
            
            su.upload();//上傳
            
            String basicPath = pageContext.getRequest().getRealPath("/") + "..\\" + "lrcInfo" + "\\";  //這個是上傳以後的文件要存放的路徑
　　　　　　　　//pageContext.getRequest().getRealPath("/")是獲取當前項目的絕對路徑
　　　　　　　　

            Files files = su.getFiles();  
            
            Collection<File> fls = files.getCollection();
            
            for(File fl : fls){
                
                if(!fl.isMissing()){  //若是文件存在
                    
                    filedName = fl.getFileName();
                    
                    
                    fl.saveAs(basicPath + filedName);  //以這樣的絕對路徑存放
                    
                }
                
            }
            
        } catch (ServletException e) {
            
            e.printStackTrace();
        
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        
        } catch (SmartUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        return filedName; //這裏是由於本身的業務需求返回的文件名
    
    }