跨域上传图片并预览

跨域上传文件

之前解决跨域问题都是使用的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'。

参考链接

通过HTML5 FileReader实现上传图片预览功能
FormData对象的使用