zoukankan      html  css  js  c++  java
  • input 框上传多个文件

    1. 在input标签中加入 multiple 属性,可以在一个输入框中选择多个文件进行上传
    <input type="file" name="img" multiple="multiple" />
    当然,这样也是一样的: 
    <input type="file" name="img" multiple />

    2.很多时候上传的时候,我们要限制一下上传文件类型(

    在windows中主要是限制后缀名
    ),或者是把选择的文件名(路径)输出到当前页面,,
    这需要用js取得选择文件的名字:

      document.getElementById("input").files[i].name

    3.后台接收,java就要看使用的框架了,struts应该只需要把对应的成员变量改成数组就OK吧(推测),
      比较老的项目,可能没有引用框架,或者说框架没有考虑到这部分,就需要修改文件上传的代码了,这里
    只说其中一种情况(我遇到的)。

      后台接收到的流是放到一个Map中的,但是在put的时候,Map的key使用的是标签的name属性,这样会导致
      选择的多个文件只能接到一个文件(Map中的Key值不能重复,前面put的就被后面的覆盖了)。

    这种情况可以使用上传文件的名作为Map的key值,这样会影响到其他的模块,主要是map中的key变化后,其他模块
    在取得流的时候,可能会接不到(标签名和文件名是会有很大的不同的)。
    我的做法是,在页面埋一个hidden,用js填充上上传文件的名(注意是多个),这样后台就可以得到上传文件的名,
    然后就没有我的事了



    附一段Demo:

    <!DOCTYPE HTML>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <body>
    <script type="text/javascript">
    function onc(){
    var files = document.getElementById("input").files;
    for(var i=0; i< files.length; i++){
    alert(input.files[i].name);
    }
    }
    </script>
    <form action="/example/html5/demo_form.asp" method="get">
    选择图片:<input type="file" id="input" name="input" onchange="onc()" multiple="multiple" />
    <input type="submit" />
    </form>
    <p>请尝试在浏览文件时选取一个以上的文件。</p>

    </body>
    </html>





  • 相关阅读:
    学习ios键盘和textfield之间操作体会
    关于Cannot assign to 'self' outside of a method in the init family解决方法
    "this class is not key value coding-compliant for the key ..."问题的解决
    在编译oc中protocol时出现的错误
    关于oc中出现的typedef的用法/定义函数指针
    VC++、MFC、COM和ATL的区别
    leetcode : Spiral Matrix II
    leetcode : Length of Last Word [基本功]
    leetcode : triangle
    leetcode : Insert Interval
  • 原文地址:https://www.cnblogs.com/Springmoon-venn/p/5536854.html
Copyright © 2011-2022 走看看