HTML+jQuery圖片上傳示例

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

<form id="imageForm" enctype="multipart/form-data" action="url" method="POST">
    <input type="text" name="imgName" />
    <input type="file" name="image" accept=""/>
    <button type="submit" >上傳</button>
</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不能直接調用，需要指定對象。

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

 

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

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