// 方法- base64位 ajax post上传 缺点当图片过大的时候上传不了,tomact默认post 2M限制 需修改后台配置maxPostSize=-1 function getImageBase64(img, ext) { var canvas = document.createElement("canvas"); //创建canvas DOM元素,并设置其宽高和图片一样 canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图 var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式 canvas = null; //释放 return dataURL; }
//方法二 //使用formData对象 //进行ajax提交 formData存在兼容性问题不支持ie
var formData = new FormData(); formData.append("file", document.getElementById("file").files[0]); formData.append('id',0) $.ajax({ url:'/uploadFileWeb', type:'POST', data:formData, contentType: false,//注意一定为false 组织ajax对xhr的修改 processData: false,//注意一定为false
success:function(res){ console.log(res) } })
//方法三 使用表单提交 将form的target指向一个隐藏的iframe再对这个iframe设置onload方法获取返回值即后台返回数据。 问题:iframe存在同源策略如果后台接口的与前端页面非同源将获取不到iframe中的数据内容 (解决设置反向代理)
//方法四 使用jquery.form插件
原理为对2,3两个方法的封装即先判断游览器是否支持formData 如果不支持将使用iframe