关于图片上传方法汇总

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