页面以Base64形式上传文件file

版权声明：支持原创，注明出处。 https://blog.csdn.net/qq_38584967/article/details/86644266

前言

将input type="file"上传的文件进行读取，读取文件的Base64码，然后上传到后台，在后台来处理这个Base64编码的文件。

正文

准备一个上传文件input控件,给定文件的onchange事件。

<input type="file" class="upload-file" name="upload" id="personfacefile" onchange="personfaceFile()">

然后在script里定义一个接收Base64文件编码的变量以及onchange方法

var personfilefaceString = "";
/**
 * 获取公民文件的正面的base64
 */
function personfaceFile(){
    var files = $('#personfacefile').prop('files');//获取到文件列表
    if (files.length == 0) {
        alert('请选择文件');
        return;
    } else {
        var reader = new FileReader();//新建一个FileReader
        reader.onload = function (evt) { //读取完文件之后会回来这里
            personfilefaceString = evt.target.result;
            //截取其中的Base64编码
            personfilefaceString = personfilefaceString.substring(personfilefaceString.indexOf(",")+1);
        }
        reader.readAsDataURL(files[0]);//读取文件
    }
}

最后再操作你的personfilefaceString 变量提交，提交事件也可以放在读取完文件的回调方法里面进行，自己变通。这里值得注意的事：

reader.onload = function (evt) { //读取完文件之后会回来这里
            personfilefaceString = evt.target.result;
            //截取其中的Base64编码
            personfilefaceString = personfilefaceString.substring(personfilefaceString.indexOf(",")+1);
        }

reader.onload方法一定要定义在读取文件操作reader.readAsDataURL(files[0])之前，切记！

参考

input type="file"文件上传到后台读取
还有一个参考博客找不到了，感谢！