关于图片上传方法汇总

最新推荐文章于 2020-08-19 10:26:35 发布

weixin_30656145

最新推荐文章于 2020-08-19 10:26:35 发布

阅读量861

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yihuite-zch/p/10873635.html

// 方法- 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

转载于:https://www.cnblogs.com/yihuite-zch/p/10873635.html