ajax提交表单上传图片及图片回显问题总结

最近由于框架上传图片功能的限制，自己用了jquery ajax进行上传，遇到了不少坑，在这里做个总结。

首先获取文件对象时，用jquery方式获取出现问题，最后改为原生js获取，成功

html代码：

<input type="file" id="load_xls" name="file" style="display:none" lay-ext="img|png|bmp|jpg" onchange ="uploadFile()">

var fileObject = document.getElementById("load_xls").files[0];

如此拿到了input里面的file文件

然后进行上传，在此我们要以表单提交方式上传，所以需要的是一个form格式的数据，

接下来进行数据格式转化；

var form = new FormData();

form.append("file",fileObject); //第一个参数是后台接收此file的参数名，另一个是文件的对象，如此数据格式的转化完成

jquery ajax上传代码：

$.ajax({

url:"",

data:form,

type:"post",

dataType:"json",//在此特别提醒，此参数是指定返回数据格式，如果后台是自己平的json串，一定要指定，否则

会返回一个和json对象十分神似的字符串并不是对象。

cache:false,

processData:false,

contentType:false //选择false 是已默认的 “application/x-www-form-urlencoded;charset = UTF-8”,数据格式上传

//再接下来是上传成功图片回显的问题在此我们用到了src发送请求，后台回传图片的流来进行图片的回显；

success:function(res){

if(res.success){

logoPath =  res.filePath;
var  filepath=res.filePath, src="${ctx}/rest/file/preview/" + res.filePath;//src 的值是请求一个返回图片流的接口。
$("#goodsImage").append("<li><a class='del_btn event_btn' data-method='deletePicture' filePath='"+filepath+"' ></a><img  shopLog='" + filepath + "' src='" + src + "' class='layui-upload-img'></li>");
$("#goodsImage").append("<input  name='purl' value='"+logoPath+"' hidden>");

layer.open({
    title: '系统提示'
    ,content: '上传成功!'
    ,closeBtn: 0
    ,icon: 6
    ,yes:function(){
        $("input[name='file']").css("display","none");
        layer.closeAll();
    }
});

}

})

//这就是大概的流程，希望能对你有用

ajax提交表单上传图片及图片回显问题总结

猜你喜欢