一、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. CoInitialize浅析一

    大家都知道程序中若要使用COM组件则必须要先调用CoInitialize,该函数主要是用来初始化COM运行环境.但这个函数的作用域是以线程为单位还是以进程为单位呢?也许大家已经通过测试程序摸索出答案, ...

  2. 如何用github快速搭建个人博客

    当当当当-来看下新鲜出炉的Github博客 http://wli12.github.io/ 喜欢写markdown,但cnblogs对md文件的渲染简直丑爆了... 好奇怎么用github+Jekyl ...

  3. sublime Text3 编写java

    安装好jdk,并且配置好环境变量后(也可以放到sublime 中去配置) 2.一般的sublimetext 已经有了javac的buildsystem, 不过默认的配置不尽人意. 下面进行修改. 在S ...

  4. 腾讯优测优分享 | 游戏的UI自动化测试可以这样开展

    腾讯优测是专业的自动化测试平台,提供自动化测试-全面兼容性测试,云真机-远程真机租用,漏洞分析等多维度的测试服务,让测试更简单! 对于目前的两大游戏引擎cocos-2dx.unity3D,其UI自动化 ...

  5. win10 mysql 5.7.13 服务无法启动 3534

    自己也百度了很多方法都不管用(我用的MySQL是免安装版,直接解压缩的那种) 基本上都是说没有设置data目录,没有 初始化,我很郁闷的是都按照那些步骤处理了,到最后还是不行. 后来把配置文件里面的 ...

  6. php-长文章分页函数

    <?php function ff_page($content,$page) { global $expert_id; $PageLength = 2000; //每页字数 $CLength = ...

  7. Telnet弱口令猜解【Python脚本】

    telnet 弱口令猜解脚本 测试环境:window2003.centos7 #! /usr/bin/env python # _*_ coding:utf-8 _*_ import telnetli ...

  8. pthread_create 内存释放

    run() { pthread_attr_destroy(&m_attr);    pthread_detach(pthread_self()); }

  9. 浏览器与HTML5的相辅相成

    浏览器与HTML5的相辅相成 往往一项技术的更新和发展并不是单一性的,浏览器和HTML5技术的发展亦是如此,而它们的进步也带动了整个行业的变化.浏览器与HTML5相辅相成的关系也让我们的网页能够实现更 ...

  10. Lua 调用 Opencv 的方法

    Lua 调用 Opencv 的方法 最近想用 Lua 调用 Opencv 进行相关像素级操作,如:bitwise_and 或者 bitwise_or,从而完成图像 IoU 的计算. 那么,怎么用 Lu ...