ajax请求如何回显照片,ajax提交表单上传图片及图片回显问题总结

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

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

html代码：

uploadFile()">

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

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

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

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

var form = newFormData();

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;varfilepath=res.filePath,src="${ctx}/rest/file/preview/"+ res.filePath;//src 的值是请求一个返回图片流的接口。$("#goodsImage").append("

");$("#goodsImage").append("");

layer.open({

title: '系统提示',content: '上传成功!',closeBtn: 0,icon: 6,yes:function(){

$("input[name='file']").css("display","none");layer.closeAll();}

});

}

}

})

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