二期項目總結(一) 通過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來處理,就可以成功的上傳一個文件了。

 

 

 

1、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; //這里是因為自己的業務需求返回的文件名 }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM