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. docker-ce-17.09 网络基础配置

    一.端口映射实现访问容器 1.我们先从pull一个nginx镜像,然后后台运行该镜像 > docker pull nginx > docker run -d -P nginx:latest ...

  2. Non-negative Integers without Consecutive Ones

    n位二进制,求不包含连续1的二进制(n位)数字个数. http://www.geeksforgeeks.org/count-number-binary-strings-without-consecut ...

  3. jQuery 作业三个按钮

    作业三个按钮 <!--声明 文档--> <!DOCTYPE html> <!--定义字符集--> <html lang="zh-CN"&g ...

  4. 10.31JS日记

    this问题 (1)this是js的一个关键字,指定一个对象,然后替代this: 函数中的this指向行为发生的主体,函数外的this都指向window,没有意义 (2)函数内的this跟函数在什么环 ...

  5. 如何提高php应用的性能?

    1. 如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍.2.$row[’id’] 的速度是$row[id]的7倍.3.echo 比 print快,并且使用echo的 ...

  6. (转)关于X64位系统IIS7下支持32位asp.net程序

    最近在windows2008 x64位系统下的IIS7下部署asp.net程序. vs2005或vs2008默认的情况下是Any cpu 的也就是支持x86和x64两种系统的.可我的程序在引用了一个三 ...

  7. VFIO简介 （转载）

    VFIO简介 LTCChina | Nov 20 2013 | Comment (1) | Visits (15204) 概述 VFIO是一套用户态驱动框架,它提供两种基本服务: 向用户态提供访问硬件 ...

  8. win10安装.net3.5

    近日有网友反映在windows10_64位系统电脑上安装Net framework3.5,操作时总失败,怎么办呢?小编下面就介绍win10 64位系统无法安装Net framework3.5的两种解决 ...

  9. 循环&信息添加&颜色修改

            #import "AViewController.h" @interface AViewController () <UIActionSheetDelegat ...

  10. ok,机房小感

    难得一次能早来机房,趁今天考完试没啥事,随便写两句牢骚. 学习与编程 老师曾经在招生的时候认真讨论过这个问题,这两者彼此协调并不是一件容易事,很明显,编程是一门大课.它虽然与理科有一定联系,但不代表它 ...