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. 自动化运维工具 SaltStack 搭建

    原文地址:https://www.ibm.com/developerworks/cn/opensource/os-devops-saltstack-in-cloud/index.html#N10072 ...

  2. C语言可以开发哪些项目？（转）

    原文地址:https://www.cnblogs.com/shiyanlou/p/6098661.html 知乎:https://www.zhihu.com/question/20564904 C语言 ...

  3. WEB框架之Django实现分页功能

    一 Paginator分页器 1 首先在数据库中生成大量数据 def index(request) book_list = [] for i in rang(1000) book = Book(tit ...

  4. Task.WaitAll代替WaitHandle.WaitAll

    Task.Waitall阻塞了当前线程直到全完.whenall开启个新监控线程去判读括号里的所有线程执行情况并立即返回,等都完成了就退出监控线程并返回监控数据. task.Result会等待异步方法返 ...

  5. javascript 重构alert()

    javascript问题,关于重构window.alert()后,然后调用window原本的window.alert()的方法 大神们,问个问题,如果在script标签的第一行散写,重构了window ...

  6. c# 上传excel数据总结(一)线程的使用

    1: 因为程序涉及到上传,开始暂停,继续,删除, thread 在老版本用使用th.Abort(); th.Resume(); 停止 恢复  th.Suspend(); 挂起 猛的一看挺合适啊..但微 ...

  7. Oracle_高级功能(4) 数据库存储结构

    数据库存储结构分为:物理存储结构和逻辑存储结构.物理结构和逻辑结构分开,对物理数据的存储不会影响对逻辑结构的访问.1.物理存储结构 数据库文件 os block2.逻辑存储结构 tablespace ...

  8. DOM-设置样式心得

    一.style属性的设置和获取 style是一个对象,不能通过内嵌或外链获取,也就是只有是行内式的时候才能打印显示 style本身是一个对象 属性的值是字符串,没有赋值的情况下是"" ...

  9. 03. pt-config-diff

    pt-config-diff h=192.168.100.101,P=3306,u=admin,p=admin h=192.168.100.102,P=3306,u=admin,p=admin pt- ...

  10. object SparkStreaming_StateFul {

    窗口查询 ) )).reduceByKeyAndWindow(_+_,_-_,Seconds(10),Seconds(15))     每隔15s进行查询,查询为前10s的结果.这里的值必须为采集时间 ...