How to upload multiple files & preview using jQuery

How to upload multiple files & preview using  jQuery

in the code we are uploading more than one file with using js to fully dynamic multipal file upload and also see the previous images.

 HTML 

<input type="file" id="filesss" multiple="" />

<div id="dragimgappend"></div>


More information please visit this url https://www.papawebdesigner.com/



 CSS 


<style type="text/css">
.documentUploadS img {
    width: 140px;
}
.documentUploadS {
    position: relative;
}
span.selFile {
    cursor: pointer;
    font-weight: 500;
    position: absolute;
    right: 0;
    z-index: 99999999;
    top: 0;
    background: red;
    color: #fff;
    width: 20px;
    text-align: center;
}
div#dragimgappend > div {
    display: inline-block;
    margin-right: 8px;
}
</style>



 JS 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
var storedFiles = [];
$(document).ready(function() {
    $("#filesss").on("change", handleFileSelect);
    $("body").on("click", ".selFile", removeFile);
});

function handleFileSelect(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);
    filesArr.forEach(function(f) {      
        if(!f.type.match("image.*")) {
            return;
        }
        storedFiles.push(f);

        var reader = new FileReader();
        reader.onload = function (e) {
            $("<div class='documentUploadS'><img class='imageThumb' src='"+e.target.result+"' title='"+f.name+ "'></img><span class='selFile' data-file='"+f.name+"'> x </span></div>").appendTo("#dragimgappend");
        }
        reader.readAsDataURL(f); 
    });

}

function removeFile(e) {
    var file = $(this).data("file");
    for(var i=Number(0);i<Number(storedFiles.length);i++) {
        if(storedFiles[i].name === file) {
            storedFiles.splice(i,1);
            break;
        }
    }
    $(this).closest(".documentUploadS").remove();
} 
</script>


How can I detect a click outside of an element?, In jQuery

What is difference between click and onclick in jquery 

Sticky header using jquery

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/hitesh-patidar-34253a10a/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992
Follow on pinterest    -  https://in.pinterest.com/frontendissue/