JS多文件上传的实例代码
更新时间：2017年01月11日 08:55:43 作者：index_ling
本文通过实例代码给大介绍了js多文件上传的实现方法，非常不错，具有参考借鉴价值，需要的朋友参考下
废话不多说了，具体实现代码如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./jquery-1.9.1.min.js"></script>
</head>
<body>
<form id= "uploadForm" action= "" method= "post" enctype ="multipart/form-data">
<h1 >多文件上传 </h1>
<table>
<tr>
<td >上传文件： <input type ="file" name="file[]" id="file" multiple="multiple"/><a href="javascript:;" id="add">[+]</a></td>
</tr>
<tr>
<td>
<input type ="button" value="上传" id="but"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<script>
//添加
$(document).on("click","#add",function(){
var str_tr = "<tr>"+$(this).parents("tr").html()+"</tr>";
//js 替换字符串样式
str_tr = str_tr.replace(/\+/,'-');
var new_str_tr = str_tr.replace(/add/,'del');
$(this).parents("tr").after(new_str_tr);
})
//删除
$(document).on("click","#del",function(){
$(this).parents("tr").remove();
})
//文件上传
$("#but").click(function(){
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: 'http://localhost/demo/selfWork_MVC/easymvc/app/Views/Index/upload.php' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
})
</script>
相关参考：
js 实现 input type="file" 文件上传示例代码
以上所述是小编给大家介绍的JS多文件上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于JavaScript数组常用的增删改查与其他属性的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
下面小编就为大家带来一篇关于function类中定义变量this的简单说明。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jQuery实现为控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源码供读者下载参考,需要的朋友可以参考下2015-12-12
electron-builder 的基本使用及electron打包步骤
electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件,这篇文章主要介绍了electron-builder 的基本使用,需要的朋友可以参考下2023-12-12
通过 class 关键字定义一个类，然后通过 new 关键字可以方便的生产一个类的实例对象，这个生产对象的过程叫 实例化，类的成员就是类中所有的属性和方法，这篇文章主要介绍了TypeScript 类class与修饰符的详细使用,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了一些关于类型和对象的例子，大家看完例子后可能更容易理解类型和对象之间的联系2013-11-11
本节主要介绍了用js判断日期是否能跨月查询,需要的朋友可以参考下2014-07-07
JavaScript中的基本类型通过自动装箱和拆箱机制,可以临时转换为对应的包装对象,以访问属性和方法,了解包装对象的临时性和手动创建方式有助于编写更高效和正确的代码,感兴趣的朋友跟随小编一起看看吧2024-11-11
element UI中在 el-select 与 el-tree 结合组件实现过程
项目上实现某个功能，使用到了 el-select 和 el-tree 组合实现，记录下两者结合的实现过程，对 el-select 与 el-tree 结合组件实现过程感兴趣的朋友跟随小编一起看看吧2023-02-02
这篇文章主要为大家详细介绍了移动端效果之Swiper的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论