跨域上传文件
之前解决跨域问题都是使用的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'。
参考链接
