OCUpload的簡單介紹與使用

　　 OCUpload (One Click Upload)譯成中文就是一鍵上傳的意思。它是JQuery的一個插件。 
　　 對於傳統的文件上傳，只能通過form表單，將enctype設置為multipart/form-data，選中文件后還需在頁面點擊submit提交按鈕，提交表單，才能在后台接收上傳的文件並進行相關字段解析，上傳成功后，頁面還要刷新，這樣並不符合我們的某些實際需求。如果要用ajax進行文件上傳達到不刷新頁面的效果，這樣也是不對的，因為ajax不支持文件上傳，這是因為response原因，一般請求瀏覽器是會處理服務器輸出的response，例如生成png、文件下載等,然而ajax請求只是個“字符型”的請求，即請求的內容是以文本類型存放的。文件的下載是以二進制形式進行的，雖然可以讀取到返回的response，但只是讀取而已，是無法執行的，說白點就是js無法調用到瀏覽器的下載處理機制和程序。那這時想要達到上傳頁面並不刷新的效果怎么把呢？？？我們可以這么做。

<iframe name="text" style="display:none"></iframe>
<form target="text" action="xxx" method="post" enctype="multipart/form-data">
  <input type="file" name="myFile"/>
  <input type="submit" value="upload"/>         
</form>

　　通過這種方式上傳文件，刷新的頁面就變成了這個iframe，而且設置的隱藏我們看不到，而我們自己所用的頁面就不會刷新，通過這種方式達到了一個不刷新頁面上傳文件的效果。

　　而OCUpload就是采用了這種方式，只是進行了封裝我們看不到。接下來就講一講怎么使用UCOpload。

　　首先引入必要的js文件，因為是jquery的插件所以在引入jquery.ocupload-1.1.2.js之前我們還要引入jquery的js文件。

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>

　　第二步在頁面中任意提供一個元素

<input id="myButton" type="button" value="上傳"/>

　　第三部調用插件提供的upload方法，動態修改HTML頁面元素。

<script type="text/javascript">
  $(function () {  
                $("#myButton").upload({  
                    action: 'xxx',                                  //你所要向服務器請求的的路徑，必填
                    name: 'myFile',                                 //上傳組件的name的值,不寫默認是file
　　　　　　　　　　　　enctype: 'multipart/form-data',                 //mime類型，使用默認就好
                    params: {}，  　　　　　　　　　　　　　　           //請求時額外傳遞的參數，默認是為空的   
                    onSelect: function (self, element) {            //當用戶選擇了一個文件后觸發事件
                        this.autoSubmit = false;                    //當選擇了文件后，關閉自動提交
                    },  
                    onSubmit: function (self, element){}，          //提交表單之前觸發事件
　　　　　　　　　　　　autoSubmit: true,                              //是否自動提交，即當選擇了文件，自動關閉了選擇窗口后，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 是否自動提交請求。
                    onComplete: function (data, self, element){}   //提交表單完成后觸發的事件
                });   
  });      
</script>

　　這樣就完成了對OCUpload的使用。