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

1. 模仿表单提交:

  • 创建一个FormData对象

        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进行文件上传 。

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值