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
– Vincent Zhang, Commented Feb 14, 2018 at 7:10
The above file upload option need to work within one click instead of double . — John
– John, Commented Feb 14, 2018 at 7: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
– Vincent Zhang, Commented Feb 14, 2018 at 7: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. — C3roe
– C3roe, Commented Feb 14, 2018 at 8:06

Deepak Jadon · Accepted Answer · 2020-03-17 09:36:08Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related