前端頁面無刷新上傳圖片至後臺

在用戶模塊 , 我們的博客系統提供了修改頭像的功能 , 因爲Ajax是無法上傳文件的 , 我們只能用表單自己提交 , 可是那樣會刷新頁面 , 於是我使用了插件jquery-form.js
jquery-form插件是一個優秀的Ajax表單插件，可以非常容易地、無侵入地升級HTML表單以支持Ajax。jquery-form有兩個核心方法 – ajaxForm() 和 ajaxSubmit()， 它們集合了從控制表單元素到決定如何管理提交進程的功能。另外，插件還包括其他的一些方法： formToArray()、formSerialize()、fieldSerializze()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
下載地址： http://malsup.com/jquery/form/#download

在頁面中引入插件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-form.js"></script>

表單代碼

<form action="這裏寫上傳圖片的url" method="post" id="subFile" enctype="multipart/form-data"  onsubmit="return saveReport()">
    <div class="form-group">
        <input type="file" name="picture"/>
    </div>  
    <input type="submit" value="上傳">
</form>

enctype屬性規定在發送到服務器之前應該如何對錶單數據進行編碼

• application/x-www-form-urlencoded表示在發送前編碼所有字符（默認）
• multipart/form-data表示不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
• text/plain表示空格轉換爲”+” 加號，但不對特殊字符編碼。

JavaScript代碼

<script type="text/javascript">
    function saveReport(){
        $("#subFile").ajaxSubmit(function(message){ 
            console.log(message);
            //message是後臺返回的信息
        }); 
        return false; 
    // 必須返回false，否則表單會自己再做一次提交操作，並且頁面跳轉 
    }
</script>

這樣就可以無刷新的上傳圖片啦