使用两种输入文件类型时无法一键上传文件答案

【问题标题】：Unable to upload a file in one click when using two input file type使用两种输入文件类型时无法一键上传文件
【发布时间】：2018-02-14 06:41:06
【问题描述】：

我想在文件上传脚本中使用两种输入文件类型来上传徽标和图像。但是当我第二次尝试使用 input[type=file] 时，我需要双击附件图片进行上传。我想一键在两个地方上传图片以加载文件上传图片。任何人都可以帮助我实现这一目标。

我使用this script 上传带有图像预览的文件。

$('#upimg').click(function() {
    $('input[type=file]').click();
});
$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        $("#picImg").on("change", function(e) {
            var files = e.target.files,
                filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $("<span class=\"pip-file\">" +
                        "<img class=\"picThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                        "<span class=\"remove-img\"><img src ='http://www.elahmad.com/images/icon_close_16px.gif'></span>" +
                        "</span>").insertAfter("#picImg");
                    $(".remove-img").click(function() {
                        $(this).parent(".pip-file").remove();
                    });
                    $('#upimg').hide();
                    $('.remove-img').click(function() {
                        $('#upimg').show();
                    });
                });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }
});

.campic i {
    font-size: 35px;
    color: #000;
    margin: 5px 0;
    cursor: pointer;
}
.campic input[type="file"] {
    display: block;
}
.pip-file {
    position: relative;
}
.picThumb {
    max-height: 75px;
    border: 1px solid;
    padding: 1px;
    cursor: pointer;
}
.remove-img {
    position: absolute;
    bottom: 25px;
    right: -5px;
}

.campic .remove-img i {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    background: red;
    margin: 0;
    padding: 1px 4px 4px;
    border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="campic">
    <form id="form1" runat="server">
        <img id="upimg" src="https://cdn3.iconfinder.com/data/icons/web-document-icons/512/Upload_Document-512.png" width="50">
        <input type="file" name="file" id="picImg" style="display: none;" />
    </form>
</div>
<br>

<!-- another input file type -->
<input type="file" name="file" id="" style="" />

【问题讨论】：

您的具体问题是什么？有任何错误或意外行为吗？
以上文件上传选项需要一键而不是双击。
如果这正是你想要的，那么添加 onClick() 事件监听器，并在函数中向对象发送一个 doubleClick 事件。像 this.doubleClick() 这样的东西。其实上面那个是隐藏的，你怎么能点击呢？
是的。我想要一次完全 onclick()
$('input[type=file]').click() - 这会尝试触发文档中 all 文件输入的点击处理程序，这可能不是您想要的。您应该将此限制为与您单击的图像元素“关联”的文件输入。

标签： javascript jquery html css jquery-file-upload

【解决方案1】：

hello john 这里是一键上传两处图片以加载文件上传图片的代码..

我将通过类名使用 js 代码..

$(document).ready(function() {
var imgGroup = $(".picImg");
    if (window.File && window.FileList && window.FileReader) {
        imgGroup.on("change", function(e) {
            var files = e.target.files,
                filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $("<span class=\"pip-file\">" +
                        "<img class=\"picThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                        "<span class=\"remove-img\"><img src ='http://www.elahmad.com/images/icon_close_16px.gif'></span>" +
                        "</span>").insertAfter(".picImg");
                    $(".remove-img").click(function() {
                        $(this).parent(".pip-file").remove();
                    });
 
                });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }
});

.campic i {
    font-size: 35px;
    color: #000;
    margin: 5px 0;
    cursor: pointer;
}
.campic input[type="file"] {
    display: block;
}
.pip-file {
    position: relative;
}
.picThumb {
    max-height: 75px;
    border: 1px solid;
    padding: 1px;
    cursor: pointer;
}
.remove-img {
    position: absolute;
    bottom: 25px;
    right: -5px;
}

.campic .remove-img i {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    background: red;
    margin: 0;
    padding: 1px 4px 4px;
    border-radius: 20px;
}
input[type="file"] {width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="campic">
    <form id="form1" runat="server">
        <label for="picImg"><img id="upimg" src="https://cdn3.iconfinder.com/data/icons/web-document-icons/512/Upload_Document-512.png" width="50"></label><br>
        <input type="file" name="file" id="picImg" class="picImg" style="display: none;" />
    </form>
</div>
<br>

<!-- another input file type -->
<input type="file" class="picImg" name="file" id="" style="" /><br>

【讨论】：