FormData之file图片上传

先看代码：

前台：

<div class="nmse fl">上传图片：</div>
<div class="pic fl" οnclick="$('#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);//改变当前的显示图片

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

转载于:https://www.cnblogs.com/ifyoukonw/p/7068470.html