HTML

<!DOCTYPE html>

<html>

<head lang="en">

 <meta charset="UTF-8">

 <title></title>

 <script src="src/jquery1.11.1.js"></script>

</head>

<body>

<form id= "uploadForm" action= "" method= "post" enctype ="multipart/form-data">

 <h1 >多文件上传 </h1>

 <table>

  <tr>

   <td >上传文件： <input type ="file" name="myfile[]" 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: 'up.php' ,

   type: 'POST',

   data: formData,

   async: false,

   cache: false,

   contentType: false,

   processData: false,

   success: function (returndata) {

    alert(returndata);

   },

   error: function (returndata) {

    alert(returndata);

   }

  });

 })

</script>

PHP

<?php

header('Access-Control-Allow-Origin:*');

$fileArray = $_FILES['myfile'];

if($fileArray){

$upload_dir ="upload_path/";

if($fileArray){

  foreach ($fileArray['error'] as $key => $error) {

    if ( $error == UPLOAD_ERR_OK ) { //PHP常量UPLOAD_ERR_OK=0，表示上传没有出错

        $tmp_name = $fileArray['tmp_name'][$key];

        $file_name = $fileArray['name'][$key];

        $file_name = iconv("UTF-8","gbk",$file_name);

        move_uploaded_file($tmp_name, $upload_dir.$file_name);

        echo "上传成功\n";

    }else{

      $key = $key + 1;

      echo "第".$key."个文件上传出错\n";

    }

  }

}else{

  echo "nonono";

}

}

　　

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. input 与raw_input的区别

    input只能输入数字 raw_input 既可以输入数字也可以输入字符串 >>> input("input you name:") input you name ...

  2. 34-BigInteger详解

    在用C或者C++处理大数时感觉非常麻烦,但是在Java中有两个类BigInteger和BigDecimal分别表示大整数类和大浮点数类,至于两个类的对象能表示最大范围不清楚,理论上能够表示无线大的数, ...

  3. IntelliJ IDEA return null with ClassLoader.getSystemResourceAsStream(“configFilename”));

    参考https://stackoverflow.com/questions/49470053/intellij-idea-return-null-with-classloader-getsystemr ...

  4. 小程序 picker 多列选择器 数据动态获取

    需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 teach_area_id 字段关联 其各班级数据 ...

  5. Extjs如何添加多个Vtype

    http://devjs.eu/en/multiple-validation-multi-vtype-for-textfield-in-ext-js-4/

  6. go语言中常用的文件和文件夹操作函数

    package main; import ( "os" "log" "time" "fmt" ) //一些常用的文件操作 ...

  7. echart.js组件编写

    1.传参 <area-chart :chartdata='monitorTimes' :datatype='typeSelected' :dataX = '"tid"' :t ...

  8. python添加fluent日志记录

    istio默认会进行日志的记录,但是仅仅记录到服务.以及服务之间调用的信息,不记录业务日志. 如: 所以需要添加业务日志记录. 1.python引入package fluentmsgpack 2.代码 ...

  9. 8Q - 献给杭电五十周年校庆的礼物

    我不能参赛,就送给学校一个DOOM III球形大蛋糕吧.等一等,吃蛋糕之前先考大家一个问题:如果校长大人在蛋糕上切了N刀(校长刀法极好,每一刀都是一个绝对的平面),最多可以把这个球形蛋糕切成几块呢?  ...

  10. 自己动手开启QUIC（转载）

    源:https://www.bennythink.com/quic.html#title-0 今天在推上偶然发现 Google 在自己的服务器上启用了 QUIC,QUIC 这东西嘛(发音同 quick ...