最近由于框架上传图片功能的限制,自己用了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(); } });
}
}
})
//这就是大概的流程,希望能对你有用