js 文件上传的两种类型： FormData、FileReader

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37285193/article/details/83344010

<input type="file" title="">

一. 通过new FormData()上传

$("input").on("change", function(evt) {
	var $that = $(this);
	var formData = new FormData();
    var files = evt.target.files[0];
    if (!files) {
        return;
    }
    if (files.size >= 20 * 1024 * 1024) { //20M
        ydc.tip.showError("文件过大，请选择其他文件。");
        return;
    }
    formData.append("files", evt.target.files[0]);//文件
    //formData.append("contractId", id); //其他参数
    $.ajax({
        type: "POST",
        url: "/contract/filing/upload",
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false,
        data: formData,
        beforeSend: function() {
            $that.attr('disabled', 'disabled');
        },
        success: function(data) {
        	$that.removeAttr("disabled");
        },
        error: function(err) {
            $that.removeAttr("disabled");
        }
    })
})

二、通过new FileReader()上传

$("input").on("change", function(evt) {
    var files = evt.target.files[0];
    if (!/image\/\w+/.test(files.type)) {
        ydc.tip.showError("文件必须为图片！");
        $(this).val("")
        return;
    }
    var reader = new FileReader();
    reader.onload = function(event) {
        var base = event.target.result;
        console.log(base)//将此base.split(',')[1] 传送到后台
    };
    reader.readAsDataURL(files);
});