js实现form表单多文件上传的实例代码

来源：懂视网责编：小OO 时间：2020-11-27 20:22:46

js实现form表单多文件上传的实例代码

form表单的多文件上传，具体内容如下：formData对象可以使用一系列的键值对来模拟一个完整的表单，然后使用Ajax来发送这个表单。使用<；form>；表单初始化FormData对象的方式上传文件。

推荐度：

点击下载本文 文档为doc格式

导读form表单的多文件上传，具体内容如下：formData对象可以使用一系列的键值对来模拟一个完整的表单，然后使用Ajax来发送这个表单。使用<；form>；表单初始化FormData对象的方式上传文件。

这篇文章主要为大家详细介绍了JavaScript实现form表单的多文件上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

form表单的多文件上传，具体内容如下

formData对象可以使用一系列的键值对来模拟一个完整的表单，然后使用Ajax来发送这个表单

使用<form>表单初始化FormData对象的方式上传文件

<!--文件上传-->
 <form id="uploadForm" enctype="multipart/form-data">
 <p class="row" style="margin-top: 20px;">
 <p class="form-group col-md-12" id="file"> 
 <input type="hidden" name="_csrf-application"
 value="<?= $csrf ?>">
 <p class="form-group field-uploadform-excelfiles" style="margin-left: 30px;">
 <label class="control-label btn btn-primary"
 for="uploadform-excelfiles">选择文件</label>
 <input type="file" id="uploadform-excelfiles" name="UploadForm[excelFiles][]"
 multiple class="attachment-upload" accept=".xlsx">
 <input type="button" id="fileUpload" value="上传文件" class="btn btn-success" style="margin-left: 15px;">
 <p class="help-block"></p>
 <p id="fileName"></p>
 </p>

 </p>
 </p>
 <table role="presentation" class="table"><tbody id="files"></tbody></table> 
</form>

注意：

1. 使用formData对象进行表单上传必须要为form添加enctype="multipart/form-data"属性
2. 使用formData对象进行表单上传必须要对其开始填入的值按照name属性放入该对象中，不能开始使用action上传，后面使用formData进行上传，这样会导致上传数据出现错误

获取change事件改变的文件

删除按钮事件

文件上传事件

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程