JS多文件上传的实例代码


Posted in Javascript onJanuary 11, 2017

废话不多说了,具体实现代码如下所示:

<!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多文件上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 #Javascript
Javascript中return的使用与闭包详解
Jan 11 #Javascript
jQuery对table表格进行增删改查
Dec 22 #Javascript
javascript基础知识讲解
Jan 11 #Javascript
bootstrap侧边栏圆点导航
Jan 11 #Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 #Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 #Javascript
You might like
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
JavaScript的目的分析
2007/01/05 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JS中Location使用详解
2015/05/12 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
关于Django外键赋值问题详解
2017/08/13 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
C语言编程题
2015/03/09 面试题
params有什么用
2016/03/01 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
网络专业学生个人的自我评价
2013/12/16 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python