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 相关文章推荐
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
javascript封装简单实现方法
Aug 11 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
Vue-cli3多页面配置详解
Mar 22 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个人网站架设连环讲(四)
2006/10/09 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Django model update的多种用法介绍
2020/03/28 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
20年同学聚会感言
2014/02/03 职场文书
小学开学标语
2014/07/01 职场文书
师德师风学习材料
2014/12/19 职场文书
转正申请报告格式
2015/05/15 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang