zoukankan      html  css  js  c++  java
  • input file实现多次上传文件(不会覆盖上次上传的文件)

    html原生的file多选控件:<input class="className" type="file" name="name" accept="image/*" multiple />

    存在问题:第一次选择了n个文件,第二次选中m个文件,第二次选择结束之后,第一次选择的文件会被覆盖掉。导致上传的内容不包含最后一次之前选择的文件。

    解决方案:

    1.用一个div作为选择文件的触发节点:<div id="uploaderBox" class="weui-uploader__input"></div>

    2.给uploaderBox绑定点击事件:点击div动态添加file控件(隐藏),给file控件绑定change事件(预览操作等),模拟file控件点击事件触发选择文件操作。代码如下:

    $("#uploaderBox").on("click", function(e) {
           var newFileInput = "<input id='uploaderInput' type='file' name='name' accept='image/*' multiple />";
           $(this).parent().append($(newFileInput));
           $("#uploaderInput").bind("change", function(e){
                 //onFileUploaded(e);预览等操作
                 $(this).removeAttr("id");
           });
           $("#uploaderInput").click();
    });
    <div id="uploaderBox" class="weui-uploader__input"></div>
    <-- <input type="file" name="name" accept="image/*" multiple=""> --> <-- 动态添加的file控件 -->
    
    
  • 相关阅读:
    css学习_css3伸缩布局 flex布局
    css学习_cs3s旋转的图片
    css学习_css3过渡
    css学习_css伪元素的本质
    css学习_css精灵技术、字体图标
    css学习_css用户界面样式
    Python 的 with 语句
    KNN--Python实现
    Python中NumPy(axis=0 与axis=1)
    Python中escape和unescape
  • 原文地址:https://www.cnblogs.com/zhoujl-5071/p/7884866.html
Copyright © 2011-2022 走看看