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. twitter oa

    字符串括号匹配有效性: 要求从直接return改成了返回yes or no.需要添加到list后break,然后每次循环之前,boolean要重新初始化. array index报错是什么鬼?算了,脑 ...

  2. Redis 中 redis.conf配置详细解析

    ########################################### 基本配置 ##################################### # 端口 port 666 ...

  3. 非线性优化（高翔slam---第六讲 ）

    1.线性最小二乘问题 2.非线性最小二乘问题 因为它非线性,所以df/dx有时候不好求,那么可以采用迭代法(有极值的话,那么它收敛,一步步逼近): 这样求导问题就变成了递归逼近问题,那么增量△xk如何 ...

  4. sqlserver打开对象资源管理器管理的帮助文档的快捷键

    sqlserver打开对象资源管理器管理的帮助文档的快捷键:Fn+F1

  5. Python 内置函数 memoryview

    转载自:https://www.cnblogs.com/sesshoumaru/p/6035548.html 英文文档: class memoryview(obj) memoryview object ...

  6. Java的OOP三大特征之一——封装

    面向对象三大特征之一 封装  继承  多态   封装性就是把类(对象)的属性和行为结合成一个独立的相同单位,并尽可能隐蔽类(对象)的内部细节,对外形成一个边界,只保留有限的对外接口使之与外部发生联系. ...

  7. Nginx如何设置禁止IP访问网站

    需要禁止IP访问网站.在相关的server中设置相关的限制即可.

  8. websocket activemq

    websocket:应用与服务端保持长连接 不停通信 activemq:偶发通信  心跳机制

  9. windows一键配置 php mysql apache 记录

    记录下 方便查找(最近机器老重装 资料丢失严重) wamp http://www.wampserver.com/en/#download-wrapper https://sourceforge.net ...

  10. mybatis 一次执行多条语句

    现在的一些互联网应用 为了提高性能,现在一般比较少的使用外键.不是不用,只是在创建数据库不标明外键关系,用程序去维护. 为了维护数据一致性,我们需要手动完成相关数据的删除 比如用户和用户的关注 当用户 ...