ajax跨域上传图片,跨域上传图片并预览

跨域上传文件

之前解决跨域问题都是使用的JQuery的JSONP类型的Ajax请求，JSONP原理是让服务器把数据放到它动态生成的JS文件中，然后在客户端中调用。但是JSONP只支持GET方式的请求，不适用于上传文件。

所以后来使用CORS实现跨域上传文件。CORS允许远程服务器定义哪些源站有权限访问它的资源。具体做法是在服务器端设置响应头部的Access-Control-Allow-Origin。设置为*表示允许任意外域访问，也可以指定允许某个源站的地址，比如Access-Control-Allow-Origin: http://test.example。

FormData处理文件数据

当表单中需要上传文件时，可以使用FormData，这时需要在form标签中指定编码类型为multipart/form-data。对应的HTML代码:

FormData使用也很简单，结合JQuery的POST类型的Ajax请求传递数据。对应的js代码:

var formdata = new FormData();

formdata.append('photo', $("#imageUpload")[0].files[0]);

//也可以添加别的数据...

//发送请求

$.ajax({

type: 'POST',

url: "/api/user/update/",

data: formdata, //用FormData编码好的数据

cache: false, //不缓存

contentType: false, //禁止jQuery的数据转换操作(data默认转换为query string)

processData: false, //禁止jQuery默认的转换过程

error: function() {

console.log('request /api/user/update/ failed!');

},

success: function(data) {

//......

}

})

需要注意的是，

FormData对象的字段类型可以是 Blob, File, 或者 string： 如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。

比如我遇到一个问题就是，如果字段的值为null，传递到后端的会是字符串"null"，导致保存到数据库里对应的字段内容也变成字符串"null"了，这是个坑。

FileReader读取文件并预览

如果选择图片之后要在当前页面上预览，可以使用HTML5的FileReader实现。这里主要使用readAsDataURL(file)方法，读取文件并将文件以数据URI的形式保存在result属性中，然后在加载文件的事件监听中将result设置为图片的src，这样就能在页面上看到刚选择的图片了。

对应的JS代码：

//上传照片按钮的change事件监听，实现照片预览

$("#imageUpload").on('change', function () {

if($(this)[0].files[0].size/(1000) >256){ //限制文件的大小

$.dialog({

title: "哎呀",

content: "上传的照片应小于256KB！"

});

}else{

if (typeof (FileReader) != "undefined") {

var image_holder = $("#image-holder");

image_holder.empty();

var reader = new FileReader();

reader.onload = function (e) { //FileReader的load事件监听

$("", {

"src": e.target.result,

"class": "thumb-image"

}).appendTo(image_holder);

};

image_holder.show();

reader.readAsDataURL($(this)[0].files[0]); //使用FileReader读取文件

} else {

$.dialog({

title: "哎呀",

content: "您的浏览器不支持FileReader！"

});

}

}

});

file类型的input点击后弹窗很慢？

使用Chrome，点击选择文件按钮之后，等好几秒弹窗才出现，甚至浏览器直接卡死了。后来发现是因为设置了accept='image/*'，解决办法是指定具体的几种图片格式。比如accept='image/jpg, image/jpeg, image/png, image/svg'。

参考链接