一、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. HTML5新增标签及具体用法

    html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...

  2. i5 6300HQ 和 i7 6700HQ

    i7 6700HQ: 四核八线程 14nm 45W 2.6-3.5GHz 支持DDR4 2133内存 三级缓存6M HD Graphics 530集显 i5 6300HQ: 四核四线程 14nm 45 ...

  3. Java篇-File类之创建删除

    /** * */ package com.io.file; import java.io.File; import java.io.IOException; import org.junit.Test ...

  4. ios 多种传值方式

    在网上看了看传值方法,没有找到完整的.在这把自己看到的几种传值方法写写吧. 1 . 属性传值 2 . 通知传值 3 . 代理传值 4 . block传值 5 . 单列传值 6 . ShareAppli ...

  5. EF Core CodeFirst实践 ( 使用MS SqlServer)

    这里使用 MS SQLSERVER ,网上大多使用 SQLite 先来一个CodeFirst 新建项目 这里我们选择  ASP.NET Core Web Application (.NET Core) ...

  6. 自动换行(word-wrap:break-word;word-break:break-all)

    word-wrap:break-word; 自动换行,不把单词拆开 word-break:break-all; 自动换行,拆开单词 white-space:nowrap; 文本不会换行,文本会在同一行 ...

  7. python pickle 序列化类

    python pickle 序列化类 # coding:utf-8 try: import cPickle as pickle except ImportError: import pickle cl ...

  8. Facebook 网络模拟工具 ATC部署及使用

    废话引用: Facebook此前开源了增强网络流量控制工具 ATC,能利用WiFi网络模拟各种移动网络,测试智能手机和APP在不同国家地区和应用环境下的性能表现.ATC能够模拟2G.2.5G(Edge ...

  9. IOS Table中Cell的重用reuse机制分析

    IOS Table中Cell的重用reuse机制分析 技术交流新QQ群:414971585 创建UITableViewController子类的实例后,IDE生成的代码中有如下段落: - (UITab ...

  10. Nutch插件原理

    本文目的:讲解Nutch的插件运行时加载原理