zoukankan      html  css  js  c++  java
  • html5 多文件选择

    引用:http://www.linuxidc.com/Linux/2012-05/59907.htm

    HTML5 里面对于文件上传有了极大的增强,曾几何时,当我们需要实现一个多文件双传功能,必须一次指定多个<input type="file>,如果要上传10个文件就必须指定10行,因为HTML4 里面,所有的<input type="file>只支持单个文件选择、

    但是在HTML5里面,可以给<input type="file"> 加上一个multiple属性,这样这个空间就直接支持多文件上传了.废话不多说,献上代码:

    1. <!DOCTYPE html> 
    2. <head> 
    3. <meta charset="UTF-8"> 
    4. <title>HTML5 对于多文件选择的增强Demo</title> 
    5. <script type="text/javascript" src="js/fileops.js"></script> 
    6. </head> 
    7.  
    8. <p>multiple文件选择 FileList Demo:</p> 
    9. 选择文件: 
    10. <input type="file" id="multifile" multiple size="80"/> 
    11. <input type="button" onclick="showFileName()" value="文件上传" /> 

    当点击button时候,会触发showFileName()方法,这里将遍历所有被选择的文件,并且依次打印出它们的文件名:

    1. /** 
    2.  *  This file is confidential by Charles.Wang 
    3.  *  Copyright belongs to Charles.wang 
    4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
    5.  */ 
    6.   
    7.  function showFileName(){ 
    8.      
    9.     console.log(" FileList Demo:"); 
    10.     var file; 
    11.     //取得FileList取得的file集合 
    12.     for(var i = 0 ;i<document.getElementById("multifile").files.length;i++){ 
    13.         //file对象为用户选择的某一个文件 
    14.         file=document.getElementById("multifile").files[i]; 
    15.         //此时取出这个文件进行处理,这里只是显示文件名 
    16.         console.log(file.name); 
    17.          
    18.     } 
    19.  } 

    然后当点击“选择文件”按钮时,则会弹出一个对话框,让你选择,这时候,你可以按住Ctrl键并且点击鼠标左键点住你想要的文件,从而进行多文件选择。不少人都在这里搞不明白为什么不能选择多个文件。

    选中之后,点"打开”,则<input>输入框中会提示你已经选择了多少个文件:

    最后,点击“文件上传”按钮,则会触发这段JS代码的最终执行,它用FileList进行遍历所有被选择的文件,然后依次在浏览器控制台打印出文件名,于是,控制台输出如图:

  • 相关阅读:
    【Java学习】01. Java基本介绍及环境搭建
    vue组件之间的传值
    检测上传的文件类型js实现方式
    正则表达式学习笔记
    Nuxt.js学习笔记
    Vue+typescript+vuex项目实践学习笔记
    项目依赖&开发依赖
    vuex学习笔记
    export与export default的区别
    ES6 数组去重方法
  • 原文地址:https://www.cnblogs.com/sode/p/2780681.html
Copyright © 2011-2022 走看看