HTML5文件上传控件file实现多个文件上传

HTML5支持一次提交多个文件(只用一个<input>),只要为<input>元素添加 multiple 属性即可。添加后,用户就可以在打开的对话框中一次选择多个文件了(比如在Windows中按Ctrl键并单击多个文件,或者用鼠标拖出一个选择框)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Read Text</title>
  <style>
    div {
     margin-top: 30px;
     border: solid 1px black;
     padding: 5px;
    }
  </style>
  <script>
    function processFiles(files) {
      var message = document.getElementById("message");
      for(var i=0; i<files.length; i++) {
        //取得下一个文件 
        var file = files[i];
        message.innerHTML += "文件名:" + file.name + "<br>";
        message.innerHTML += "文件大小:" + file.size + "字节<br>";
        message.innerHTML += "文件类型:" + file.type + "<br><br>";
      }
    }
  </script>
</head>
<body>
  <input id="fileInput" type="file" size="65" onchange="processFiles(this.files)" multiple>
  <div id="message"></div>
</body>
</html>

时间: 2024-10-14 03:30:28

HTML5文件上传控件file实现多个文件上传的相关文章

asp.net中的文件上传控件能否打开一个固定文件夹然后再选择文件

问题描述 asp.net中的文件上传控件能否打开一个固定文件夹然后再选择文件asp.net中的文件上传控件能否打开一个固定文件夹然后再选择文件我现在要上传文件,但是在点击浏览的时候我想要打开一个指定的目录,然后在这个目录中选择文件..用什么方法能够实现呢?请各位大侠帮忙呀!!!!!!!!!??????????????????????????谢谢各位!!!!!!!! 解决方案 解决方案二:属于客户端程序,安全考虑的话怕不可行解决方案三:可以,将所选目录文件列出就行了,用常用的IO操作就能实现CSD

jQuery文件上传控件 Uploadify 详解_jquery

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&

asp.net silverlight批量上传控件实现方法

    /// <summary>     /// 文件的状态     /// </summary>     internal enum filestatus     {         /// <summary>         /// 准备就绪,等待上传         /// </summary>         ready = 0,         /// <summary>         /// 正在上传中         /// &

寻找一个好用的ajax上传控件

问题描述 1. 用过uplodify,简单好用,但这货需要flash支持,有些环境下对falsh支持不好2. 尝试用jQuery-File-Upload,看起来很强大的样子,但用起来很复杂,跨域上传一直没搞定寻找一个上手简单的ajax上传控件,能支持跨域上传 问题补充:jQuery-File-Upload真是一朵奇葩,搞那么多功能,而让人一下子抓不住核心功能,调试起来也麻烦. 解决方案 我现在就用jQuery-File-Upload,你可以下载我的代码 直接复制着用https://github.

Javascript美化input=file文件上传控件

[实例名称] JS实现文件上传一次性完成 [实例描述] 默认的HTML控件file可以实现文件的上传,但必须经过选择文件和单击上传按钮两个步骤.本例学习如何实现一步上传文件的操作. 例子  代码如下 复制代码 <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.111cn.net)</title> </head> <body>

百度多文件异步上传控件webuploader基本用法解析_jquery

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核:  若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"/>  若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"/>  若页面需默认用ie标准内核

5款Ajax 文件上传控件_AJAX相关

1. FancyUpload (演示地址) FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload. 2. SwfUploadPanel (演示地址) SwfUploadPanel是一个结合SwfUpload v2.0.2与ExtJS 2.0.x开发的多文件上传面板(panel). 3. Yahoo! UI Library: Uploader (演示地址) YUI Uploader Control结合Flash开发

自定义文件上传控件样式-input透明法

自定义文件上传控件样式-input透明法. 作为一个刚入坑不久的程序小白,今天和一个自定义<input type="file">控件的工作斗智斗勇了一上午.通过各种膜拜大神们的资料,总算最后有了一个还算看的过去的解决方案,来记录一下. 页面中,<input type="file">控件的默认显示 在Chrome中是这样: 在IE里是这样: 要如何使它变成下面这样,点击此区域也能上传文件呢? 原理:将input放进一个具有背景的div标签中,并

ASP.NET文件上传控件Uploadify的使用方法_实用技巧

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl