HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.  <meta charset="UTF-8">
  5.  <title></title>
  6.  <script src="src/jquery1.11.1.js"></script>
  7. </head>
  8. <body>
  9. <form id= "uploadForm" action= "" method= "post" enctype ="multipart/form-data">
  10.  <h1 >多文件上传 </h1>
  11.  <table>
  12.   <tr>
  13.    <td >上传文件： <input type ="file" name="myfile[]" id="file" multiple="multiple"/><a href="javascript:;" id="add">[+]</a></td>
  14.   </tr>
  15.   <tr>
  16.    <td>
  17.     <input type ="button" value="上传" id="but"/>
  18.    </td>
  19.   </tr>
  20.  </table>
  21. </form>
  22. </body>
  23. </html>
  24. <script>
  25.  //添加
  26.  $(document).on("click","#add",function(){
  27.   var str_tr = "<tr>"+$(this).parents("tr").html()+"</tr>";
  28.   //js 替换字符串样式
  29.   str_tr = str_tr.replace(/\+/,'-');
  30.   var new_str_tr = str_tr.replace(/add/,'del');
  31.   $(this).parents("tr").after(new_str_tr);
  32.  })
  33.  //删除
  34.  $(document).on("click","#del",function(){
  35.   $(this).parents("tr").remove();
  36.  })
  37.  
  38.  //文件上传
  39.  $("#but").click(function(){
  40.   var formData = new FormData($( "#uploadForm" )[0]);
  41.   $.ajax({
  42.    url: 'up.php' ,
  43.    type: 'POST',
  44.    data: formData,
  45.    async: false,
  46.    cache: false,
  47.    contentType: false,
  48.    processData: false,
  49.    success: function (returndata) {
  50.     alert(returndata);
  51.    },
  52.    error: function (returndata) {
  53.     alert(returndata);
  54.    }
  55.   });
  56.  })
  57. </script>

PHP

  1. <?php
  2. header('Access-Control-Allow-Origin:*');
  3. $fileArray = $_FILES['myfile'];
  4. if($fileArray){
  5. $upload_dir ="upload_path/";
  6. if($fileArray){
  7.   foreach ($fileArray['error'] as $key => $error) {
  8.     if ( $error == UPLOAD_ERR_OK ) { //PHP常量UPLOAD_ERR_OK=0，表示上传没有出错
  9.         $tmp_name = $fileArray['tmp_name'][$key];
  10.         $file_name = $fileArray['name'][$key];
  11.         $file_name = iconv("UTF-8","gbk",$file_name);
  12.         move_uploaded_file($tmp_name, $upload_dir.$file_name);
  13.         echo "上传成功\n";
  14.     }else{
  15.       $key = $key + 1;
  16.       echo "第".$key."个文件上传出错\n";
  17.     }
  18.   }
  19. }else{
  20.   echo "nonono";
  21. }
  22. }

　　

php,ajax上传文件,多文件上传的更多相关文章

  1. Ajax表单异步上传（包括文件域）

    起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...

  2. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  3. BatsingJSLib 2.3、Ajax上传多个文件

    //2.3Ajax上传单个或多个文件 //<input type="file" multiple="multiple"/> //参数:文件的表单JD ...

  4. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  5. HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传

    这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...

  6. 框架基础：ajax设计方案（三）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  7. (转)通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  8. 前端通信：ajax设计方案（四）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  9. ajax实现文件上传，多文件上传，追加参数

    1.html部分实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  10. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

随机推荐

  1. Intellij Idea创建Android项目

    创建工程前请已下载安装好了Intellij Idea和Android SDK. Intellij idea 2016.3.2 步骤 Android SDK设置 在FIle –> Other Se ...

  2. 【分布式架构】“spring cloud”与“dubbo”微服务的对比

      秉承站在巨人的肩膀上,同时我也不想重复制造轮子,我发现了一系列关于“分布式架构”方面,我需要,同时能够解决我的一些疑惑.问题的博客,转载过来,原文链接: http://blog.csdn.net/ ...

  3. swift 关于didSet 和willSet赋值的注意点

    1. 初始化赋值的时候都不会走这个的方法, 需要在创建结构体后或对象后,在赋值,此时才会走这个方法

  4. [leetcode]123. Best Time to Buy and Sell Stock III 最佳炒股时机之三

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  5. equals与“==”的区别

    对于值类型,“==”比较的是不是同一数值,equals先比较是不是同一类型,在比较是不是同一数值: 对于引用类型,“==”和equals比较的都是是否引用了同一实例对象

  6. 小程序循环多个picker选择器，实现动态增、减

    现象 循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变: 问题 怎样操作才能实现只改变当前操作的下拉框的值? 思路 在js中设置一个数组变量,存储每个picker选择器默认的值:然后 ...

  7. ubuntu14.04 安装系统/搜狗/QT/qq/wps/CAJviewer

    1.安装ubuntu系统     http://jingyan.baidu.com/album/4dc40848491fc5c8d946f1b1.html?picindex=1 官方网站:    ht ...

  8. ABP框架使用Swagger

    参考文档:https://www.cnblogs.com/xcsn/p/7910890.html 步骤1:Nuget安装Swashbuckle到*.WebApi项目 步骤2:在*.WebApi> ...

  9. 对于devexpress gridview 内插图加加进度条等的一点解读

    如上图,gategory 加了小图标, 其他行内还有计算器,大图片   进度条等 using System; using System.Drawing; using System.Collection ...

  10. javascript数组中数字和非数字下标的区别(转)

    http://blog.csdn.net/qq_27461663/article/details/52014911 考完试后闲来无事,想起好多天没写js了,于是打算实践一下最近看到的一些好玩的点子.结 ...