最近由于框架上传图片功能的限制,自己用了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("

span>+%20src%20+%20<span%20style=%22color:#6a8759;%22>%22");$("#goodsImage").append("");

layer.open({

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

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

});

}

}

})

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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐