文件上传(前端篇)

迷路的老虎LH

已于 2023-05-07 16:31:51 修改

阅读量319

点赞数

分类专栏： js 文章标签：前端 javascript

于 2023-05-07 16:24:54 首次发布

本文链接：https://blog.csdn.net/hello_qaz123/article/details/130544181

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js，进行多个文件上传并获取文件base64,

1、html代码

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/new.js"></script>
  </head>
  <body>
       
  </body>
</html>

2、new.js


$( function () {
let input = "<input id='txtuploadFile'  type='file' multiple='multiple' />";
        if ($("#txtuploadFile").length === 0) {
            $("body").append(input);
            $('#txtuploadFile').change(function () {
			
			     if ($("#txtuploadFile").val() === '') {
                    return;
                }
				var filelist=[];
				var files =$('#txtuploadFile')[0].files;
				async function getFile() {
					for(var i=0;i<files.length;i++){
						let res = await getFileBase64(files[i]);
						filelist.push(res);
						/*
						let reader = new FileReader();
						reader.readAsDataURL(files[i]);
						reader.onload = await function (ev) { //文件读取成功完成时触发
							let dataURLOrigin = ev.target.result;
							
							filelist.push(dataURLOrigin);
						}
						*/
					}
					console.log(filelist);
					//此处可调用后端接口，把文件内容传给后台
					//xxxxxxxxxxxxxxxxxxxxxxxx
				}
				function getFileBase64(file) {
				    return new Promise(function (resolve, reject) {
					let reader = new FileReader();
					let imgResult = "";
					reader.readAsDataURL(file);
					reader.onload = function (ev) {
					  let dataURLOrigin = ev.target.result;
					  imgResult = dataURLOrigin;
					};
					reader.onerror = function (err) {
					  reject(err);
					};
					reader.onloadend = function () {
					  resolve(imgResult);
					};
				  });
				}
				getFile(); 
			})
		}
		
})