HTML+jQuery圖片上傳示例

圖片上傳HTML部分只須要增長一個表單或在原有的表單中添加<input type="file">的標籤，表單示例以下：

1 <form id="imageForm" enctype="multipart/form-data" action="url" method="POST">
2     <input type="text" name="imgName" />
3     <input type="file" name="image" accept=""/>
4     <button type="submit" >上傳</button>
5 </form>

其中，form和input[type="file"]的屬性是圖片或者文件上傳的關鍵屬性；

對於要上傳圖片或文件的表單form，其必要屬性爲enctype="multipart/form-data"，這一屬性主要做用是將form的MIME編碼設置成二進制，爲圖片或文件上傳提供編碼基礎。

注：表單form的默認MIME編碼爲application/x-www-form-urlencoded。

接下來，是input[type="file"]的屬性設置。input[type="file"]是調用了HTML默認提供的本地文件選擇的控件。其中，accept屬性定義了空間打開時默認瀏覽的文件格式。accept的部分值（與圖片上傳相關的值）及其對應的文件格式以下表所示：

值	對應的文件
image/*	全部圖片文件
image/png	png格式的圖片
image/jpeg	jpg格式的圖片
image/gif	gif格式的圖片
image/png,image/jpeg,image/gif	png,jpg,gif格式的圖片

上述表單能完成圖片上傳的前臺工做，但每次提交表單以後都會刷新頁面，會影響用戶的交互體驗。而對於進行文件上傳的表單，ajax提交方式徹底不能實現（原理還未知），所以，我引用了jQuery的一個表單插件——jquery.form.js中的ajaxSubmit。

jquery.form.js的ajaxSubmit的使用方式跟ajax相似，不過ajaxSubmit不能直接調用，須要指定對象。

 1 <script type="text/javascript" >
 2     var ajax_option={
 3         url: url,                  //String, 表單提交的目標地址，此屬性會覆蓋表單的action屬性
 4         type:type,             //String，表單提交的方式(POST or GET)，此屬性會覆蓋表單的method屬性
 5         dataType: null,    //String，指定接受服務端返回的數據類型(xml，script  or  json)
 6         clearFomr: true,   //boolean，默認爲false，成功提交後是否清除全部表單元素的值
 7         resetFomr: true,  //boolean，默認爲false，成功提交後是否重置全部表單元素的值
 8         timeout: 3000,    //number，單位ms，限制請求的時間，當請求大於設置的時間後，跳出請求
 9         success:function(responseText,statusText,xhr,$form){
10             console.log(responseText);
11             //業務提示
12         },//提交成功後的回調函數 。參數詳解：responseText，服務器返回的數據內容；statusText，服務器返回的狀態
13         beforSubmit: function(formData, jqForm, options){
14             console.log(formData);
15             //業務提示
16         },//提交以前的回調函數。參數詳解：formData，數組對象，爲表單的內容；jqForm，jQuery對象，封裝了表單的元素；options，以前設置的ajaxSubmit的option對象。
17     };
18  
19     //表單提交事件
20     $('#imageForm').submit(function(){
21         $("#imageForm").ajaxSubmit(ajax_option);
22         return false;
23     })
24 </script>

 

上述就是利用jquery.form.js插件實現的表單的提交。

將上述兩部分結合，就是利用HTML和JQUERY實現無刷新頁面的圖片上傳功能。