原生input标签实现ajax单文件上传和多文件上传

男娘i 2024-04-17 21:47 59阅读 0赞

自己还是一个菜鸟的时候，有次项目经理让我用Java做一个多文件上传的功能。那时候技术学得很渣，最多只能够实现单文件上传。做了一个星期都没有做出来，于是项目经理不留半点情面，当着办公室所有人的面痛批我一顿，让我颜面扫地，当时我对了他一句我大不了辞职嘛。那是我的悲伤记忆，最终和上级领导沟通半天后，确定留下来继续干。经历一些事情后，一个人总是要成长的，我也一样。如果那个简单的功能都做不出来，那我还能够干什么呢？除了提升自己我还能干什么呢？

那次的问题最后是使用SWFUpload插件解决多文件上传问题的，多年之后的今天已经对文件上传信手拈来，不管是使用插件还是原生的input标签。现在来分享一下使用原生input标签上传文件的用法。

**AJAX实现单文件上传**  
<input type="file" name="file" id="uploadFile" οnchange="uploadExcel()" accept=".xls,.xlsx">

input标签可以隐藏也可以显示出来，样式怎么好看自己就怎么改，type，name属性不要忘记。主要是触发input标签的单击事件，然后选择文件。accept属性的作用是可以限制文件的选择类型，不在accept里面的类型的文件不会显示出来。对一般人来说还是能起作用。选择好文件后，触发下一个事件onchange，它是在文件选择好以后执行。重点来了，文件选择好以后需要做的事情，上代码：

let fileType = $('\#uploadFile').val();  
fileType = fileType.substring(fileType.lastIndexOf('.'));

//文件类型校验  
if(fileType !== '.xls' && fileType !== '.xlsx')\{  
return msgError('操作提示：只能上传xls格式或者xlsx格式的文件！');  
\}

//获取单个文件  
let file = document.getElementById(\`uploadFile\`).files\[0\];

//必须创建一个FormData对象，然后将获取到的文件数据添加到对象中，并且要注意inputFile，解析时需要它。  
let formData = new FormData();  
formData.append('inputFile',file);  
$.ajax(\{  
url: '\{ \{projcfg.appurl\}\}/api/cable/cable\_manage\_route/uploadExcel',  
type: 'post',  
data: formData,  
cache: false,//上传文件无需缓存  
contentType: false,//必须  
processData: false,//用于对data参数进行序列化处理 这里必须false  
success: function (json) \{  
if (json.success) \{  
msgSuccess(\`消息提示：$\{json.msg\}\`);  
$("\#dataTable").datagrid("reload");  
\}else \{  
msgError(\`错误提示：$\{json.msg\}\`);  
\}  
$('\#importWin').dialog('close');  
$('\#uploadFile').parent().html('<input type="file" name="file" id="uploadFile" οnchange="uploadExcel()" accept=".xls,.xlsx">');  
\},  
error: function () \{  
msgError(\`错误提示：导入Excel文件出现异常，请稍后重试!\`);  
\},  
\});

后端node解析核心代码，使用formidable这个包进行解析，java则可以使用对应的包来进行解析。

测试后完全可行，项目已经上线正常运行。

**AJAX实现多文件上传**

多文件上传和单文件上传类似，只需要做少量的修改即可。

第一个需要修改的地方是添加一个multiple属性，它的作用是你可以同时选择多个文件。

function upload\_picture() \{  
//获取文件数据  
let formData = new FormData();  
let files = document.getElementById("upload\_file").files;  
formData.enctype = "multipart/form-data";  
let fileArray = \[\].slice.call(files,0);//类数组转换为数组  
let fileType = '', file = '', fileSize = '';

//第二个需要修改的地方，循环验证选择的文件和添加文件数据到FormData中  
for(let k = 0,klen = fileArray.length; k < klen; k++)\{  
file = fileArray\[k\];  
fileType = fileArray\[k\].name.substring(fileArray\[k\].name.lastIndexOf('.') + 1);  
if(fileType !== 'jpg' && fileType !== 'png')\{  
return layer.msg(\`操作提示：只能上传jpg格式或者png格式的图片!\`);  
\}  
let fileSize = Math.floor(file.size/(1024\*1024));  
if(fileSize > 2)\{  
return layer.msg(\`操作提示：只能上传大小不超过2MB的图片！\`);  
\}  
formData.append(\`upload\_file$\{k\}\`,file);//循环遍历把文件对象插到formData对象上  
\}  
if(fileArray.length === 0)\{  
return layer.msg(\`操作提示：请先选择需要上传的图片!\`);  
\}  
//提交数据  
$.ajax(\{  
url: '\{ \{projcfg.base\}\}/api/kfz/model\_manage\_route/upload\_picture.do',  
type: 'post',  
data: formData,  
cache: false,//上传文件无需缓存  
contentType: false,//必须  
processData: false,//用于对data参数进行序列化处理 这里必须false  
success: function (result) \{  
if (result.success && result.code === 2000) \{  
layer.msg(\`消息提示：$\{result.msg\}\`);  
file\_arr = result.data;  
\}else \{  
layer.msg(\`错误提示：$\{result.msg\}\`);  
\}  
//重新创建文件上传标签  
$('\#upload\_file\_div').html(\`<input type="file" name="upload\_file" id="upload\_file" οnchange="upload\_picture()" accept=".jpg, .png" multiple/>\`);  
\},  
error: function () \{  
layer.msg(\`错误提示：上传图片出现异常，请稍后重试!\`);  
\},  
timeout: 180000,  
complete: function () \{  
//$.messager.progress('close');  
\}  
\});  
\}

后端node解析核心代码：

if(path\_arr.length === Object.keys(files).length)\{  
//返回文件路径  
resole(path\_arr);  
\}else\{  
reject('文件上传出现错误，请稍后重试!');  
\}  
\}  
\});

项目中已经正式采用这种方法，完全可行，目前还没有发现其他问题。

**注意事项**

如果有文件选择错误的话或者是想重新选择，在不刷新页面的情况下，则需要替换掉原来的input标签。这个好比一次性注射器用一次就扔掉，当然吸毒的除外，每一个用于文件上传的input标签只能使用一次。采用这种处理方式可以将文件上传和数据提交完全分离开来，处理起来非常方便。如果使用form表单提交的方式，则文件上传和其他表单数据一起提交，不排除会容易出现一些未知错误。