FormData之file圖片上傳

先看代碼：

前台：

<div class="nmse fl">上傳圖片：</div>
<div class="pic fl" onclick="$('#sfz_1').click()" >
 <img id="sfz_12" src="http://www.baidu.com/static/images/user/zjzpic1.jpg" title="點擊上傳圖片">
</div>
<input type="file" class="ajax-upload"   id="sfz_1"  style="display:none">
<input type="hidden" name="sfz_1" id="sfz_11" value="">

前台JS：

$('.ajax-upload').on('change',function(){//當 input file 已經選中時觸發js

    var formData = new FormData();//先實例化formdata
    var file     = this.files[0];//獲取文件名
    var id       = this.id;//本input的id
    var url      = '/usercenter/business/upload';//接受處理本JS方法的路徑

    formData.append("sfz", file);//append方法用於向formdata中注入內容

    $.ajax({
        type: "post",
        url: url,
        //async:false,
        contentType: false,
        processData: false,
        data: formData,//傳過來
        dataType: 'json',
        xhrFields: {
            withCredentials: true
        },
        success: function (data) {
            $('#'+id+"1").val(data.url);//在隱藏的hidden中返回文件的路徑

　　　　　　　$('#'+id+"2").attr('src',data.url);//改變當前的顯示圖片

        }
    });
})
這樣，在后台操作中打印一下所有的請求信息，即可看到文件完整的請求信息了。