Question

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

我使用this script上传文件并进行图片预览。

＆＃13;

$('#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")
    }
});

＆＃13;

.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;
}

＆＃13;

<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="" />

＆＃13;

Answer 1

您好约翰，这是用于一键上传图像到两个位置以加载文件上传图像的代码。

我将按类名使用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>

使用两种输入文件类型时，无法一次上传文件

1 个答案: