Unable to upload a file in one click when using two input file type

Question

I want to use two input file type to upload logo and image in file upload script. But when I try to use input[type=file] second time I need to double click to attachment image to upload. I want to upload the image in two places in one click to load file upload image. Anyone help me to achieve this.

I used this script for upload file with image preview.

$('#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="" />

What's your exact question? any error or unexpected behavior? — Vincent Zhang, Feb 14 '18 at 07:10
The above file upload option need to work within one click instead of double . — John, Feb 14 '18 at 07:14
If that's exactly you want, then add onClick() event listener, and in the function send a doubleClick event to the object. something like this.doubleClick(). Actually, the above one is hidden, how can you even click on that? — Vincent Zhang, Feb 14 '18 at 07:17
`$('input[type=file]').click()` - this tries to trigger the click handler on _all_ file inputs in the document, which is likely not what you want. You should limit this to the file input “associated” to the image element you are clicking on. — CBroe, Feb 14 '18 at 08:06

score 0 · Answer 1 · answered Mar 17 '20 at 09:36

hello john here is the code for upload the image in two places in one click to load file upload image..

i will use js code using by class name..

$(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>

Unable to upload a file in one click when using two input file type

1 Answers1