使用input[type=file]原生实现图片的预览和上传

1. 模仿表单提交：

• 创建一个FormData对象

        

• 调用它的 append() 方法来添加字段

// formData.append(key, value);
var fd = new FormData();
fd.append("username", "Groucho");

2. 使用 FileReader 对象进行预览

// 预览
var reader = new FileReader();
reader.onload = (function (file) {
    return function (e) {
        var datainfo = this.result;
        $("#IDcardShow").css({
             "background": "url(" + datainfo + ") center center no-repeat",
             "background-size": "cover"
        });
   };
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);

3. 模拟表单提交图片

// 1. 创建一个空的fd对象
var fd = FormData();
// 2. 点击上传图片
$("input[type=file]").on("change", function (e) {
    var $this = $(this);
    // 检测文件大小 1024*1024=1048576(1M)
    if (e.target.files[0].size >= 1048576) {
        BJUI.alertmsg("warn", "上传图片大小不得超过1M");
        return false;
    }
    // 预览图片
    var reader = new FileReader();
    reader.onload = (function (file) {
        return function (e) {
             var datainfo = this.result;
             $("#IDcardShow").css({
                  "background": "url(" + datainfo + ") center center no-repeat",
                  "background-size": "cover"
             });
        };
    })(e.target.files[0]);
    reader.readAsDataURL(e.target.files[0]);
    // 添加到fd对象中等待提交
    fd.append("cert_scan", e.target.files[0]);
});
// 3. 提交
$.ajax({
    type: "post",
    url: "xxxx/xxxxx",
    data: fd,
    dataType: "json",
    processData: false,  // processData和contentType需设置为false
    contentType: false,
    success: function (data) {
        infor_notice(data.code, data.message);
        if (data.code == "1") {
            BJUI.dialog('closeCurrent');
        } else {
            this.text("确认上传");
            $this.attr("disabled", false);
        }
    }
})

4. FormData的兼容性

IE8不支持FormData, IE10才支持，因此此方法不兼容IE10以下的IE浏览器，可以使用jquery.form.js支持的ajaxsubmit进行文件上传 。