一、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. 实现PageProcessor

    4.1 实现PageProcessor 这部分我们直接通过GithubRepoPageProcessor这个例子来介绍PageProcessor的编写方式.我将PageProcessor的定制分为三个 ...

  2. 关于mongoDB的思考和nodeJS执行windows系统命令

    P1:在cnodejs.org上面看到有人问这个问题: 然后对此产生思考,第一句db.artile.find('uid':id) 然后问后台是否是这样查询,后台告诉我不是,这种写法就是违背非关系型数据 ...

  3. 前端二：CSS

    CSS: 一:介绍:学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言.让HTML和XML看起来更加美观. 语法:<style> ...

  4. mmzb游戏事故分析

    最近一次线上更新,老项目挂了,遍地哀嚎,日活跃掉了好多,心痛... 这次维护时,SA为了缩减硬件资源,做了一次数据库迁移.给到开发手上的player db,只有一些索引数据,不带有任一玩家数据.玩家上 ...

  5. Spring3.0之后->Spring MVC过滤器-HiddenHttpMethodFilter

    浏览器form表单只支持GET与POST请求,而DELETE.PUT等method并不支持,spring3.0添加了一个过滤器,可以将这些请求转换为标准的http方法,使得支持GET.POST.PUT ...

  6. Nginx 配置支持C++

    1.在auto/make脚本里添加新的编译器和链接器: #LINK = $LINK                         #原25行附近注释掉原链接器CXX=g++             ...

  7. Android SDK代理服务器解决国内Android SDK不能更新下载问题

  8. Javascript 自动计算生日

    首先调用方法需要注意 //inner_page为外围大层,确保时间可以实时修改  $(".inner_page").mouseover(function() {        va ...

  9. Geolocation API 原理及方法

    使用IP地址:基于Web的数据库:无线网络连接定位:三角测量:GPS技术:来测量经度和纬度.(综合了所有技术)地理定位的精确度,有很多方法可以定位用户的地理位置,并且每种方法都有不同的精度.桌面浏览器 ...

  10. job history 的查看

    linux shell 可以启动 mapred historyserver 然后根据显示的端口hostname+port进行访问(一般默认端口是19888)