一、HTML

选择文件的时候可以选择多个文件，这个需要我们在input file 里面加入一个属性multiple="multiple" 这样就可以框选文件了

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

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

</head>

<body>

<div style="text-align:center;margin:100px">

    <input type="file" id="file" name="file" multiple="multiple">

    <button onclick="xhr2()">多文件上传</button>

</div>

</body>

</html>

二、JS

下面使用到的知识参考自：

http://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.html

http://www.jb51.net/article/89998.htm

https://my.oschina.net/u/1866405/blog/335987

//多文件上传函数

function xhr2(){

    var xhr = new XMLHttpRequest();//第一步

    //定义表单变量

    var file = document.getElementById('file').files;

    //console.log(file.length);

    //新建一个FormData对象

    var formData = new FormData(); //++++++++++

    //追加文件数据

    for(i=0;i<file.length;i++){

        formData.append("file["+i+"]", file[i]); //++++++++++

    }

    //formData.append("file", file[0]); //++++++++++

    //post方式

    xhr.open('POST', '2.php'); //第二步骤

    //发送请求

    xhr.send(formData);  //第三步骤

    //ajax返回

    xhr.onreadystatechange = function(){ //第四步

        if ( xhr.readyState == 4 && xhr.status == 200 ) {

            console.log( xhr.responseText );//打印数据到控制台

        }

    };

    //设置超时时间

    xhr.timeout = 100000;

    xhr.ontimeout = function(event){

        alert('请求超时！');

    }

}

三、PHP

这里就是简单的接收文件和移动文件

if($_POST){

    print_r($_FILES["file"]);

    for($i=0;$i<count($_FILES["file"]['name']);$i++){

        $name=$_FILES["file"]["name"][$i];

        move_uploaded_file($_FILES["file"]["tmp_name"][$i],iconv("UTF-8","gb2312",$name));

    }

}

js多文件上传的更多相关文章

  1. js获取文件上传进度

    js获取文件上传进度: <input name="file" id="FileUpload" type="file" /> &l ...

  2. 使用ajaxfileupload.js实现文件上传

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,file ...

  3. springmvc环境下使用ajaxfileupload.js进行文件上传

    controller: /* #region */ @RequestMapping(produces = "text/html;charset=UTF-8", value = &q ...

  4. 原生js实现文件上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Js学习文件上传

    // 文件上传 jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pen ...

  6. JS大文件上传断点续传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  7. JS大文件上传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  8. js大文件上传

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  9. js实现文件上传

    js function UpladFile() { var fileObj = document.getElementById("filetes").files[0]; // 获取 ...

随机推荐

  1. 对一个目录的文件从cp936转换成utf-8

    打开一个文件,确认能够无乱码打开 [xw@localhost work]$ vi NPOSP/src/sjl05.cpp 但是,这里打开的方式是以cp936的编码方式打开的. 编码的选择,记录在~/. ...

  2. Ansible-Tower快速入门-4.以超级用户帐号登录【翻译】

    以超级用户帐号登录 首先,登录tower需要使用tower服务器所在的URL,格式如下:https://<tower server name>/ 注意:tower安装了一个自签名证书用于H ...

  3. Bullet核心类介绍（Bullet 2.82 HelloWorld程序及其详解，附程序代码）

    实验平台:win7,VS2010 先上结果截图: 文章最后附有生成该图的程序. 1. 刚体模拟原理 Bullet作为一个物理引擎,其任务就是刚体模拟(还有可变形体模拟).刚体模拟,就是要计算预测物体的 ...

  4. Java8新特性--lamada详解

    最近玩了一下这个,感觉挺有趣的,语法使用起来很简洁,让代码看起来挺清爽易读的. 看了一下源码,发现挺充分的利用了jak1.5的特性(注解.泛型). 但是,具体的实现流程还是有点不通透,先Mark,等用 ...

  5. Hadoop集群搭建安装过程（二）（图文详解---尽情点击！！！）

    Hadoop集群搭建安装过程(二)(配置SSH免密登录)(图文详解---尽情点击!!!) 一.配置ssh无密码访问 ®生成公钥密钥对 1.在每个节点上分别执行: ssh-keygen -t rsa(一 ...

  6. 第四篇T语言实例开发，自动加血

    游戏自动加血 基础知识复习 通过前面的学习了解以下内容: TC软件的基本使用 TC的基础语法 变量与常量 功能的使用 流程语句的使用 线程的基本使用 TC控件的基本使用 热键和按钮的事件功能 控件的数 ...

  7. 安装mysql因为/tmp权限不足而导致ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)的解决方案

    本机是centos 6.5  安装的mysql是5.1的版本. 在安装mysql之后,第一次启动mysql服务的时候,需要/tmp有777(rwxrwxrwx)的权限,然而楼主的/tmp是755(rw ...

  8. Jbrowse安装和序列、bam、vcf配置

    最近做了一个关于基因开发的项目,要求最终输出的文件可以在专门的基因浏览器上边显示,类似统计图的东西.废话不说上图(表示表达不出来0.0)! 先说下Jbrowse这个东西吧,一句话:一个简单的,便携式依 ...

  9. System.DateUtils 4. IsValidDateTime... 有效时间判断

    编译版本:Delphi XE7 function IsValidDate(const AYear, AMonth, ADay: Word): Boolean;function IsValidTime( ...

  10. SSH开源框架的优缺点

    js+servlet+javabean的开发模式需要写很多的重复代码,比如固定的doGet()方法,而且它的控制跳转不灵活,往往一个问题处理需要两个.java文件,而且当采用MVC模式开发时有很大的耦 ...