CODEWITHSUNDEEP
javascriptjquery
Ruther Bergonia
Ruther Bergonia

Reputation: 137

Images preview before uploading

So I have here my upload script and it has a function that the user can preview selected images before uploading but my problem is that every time I'll upload all images available for preview it is always the last file chosen.

Heres my code:

<script type="text/javascript">
    $(document).ready(function(){
        function readURL(input){
            if(input.files[0]){
                var reader = new FileReader();
                reader.onload = function(e){
                    $(".form-holder").append("<img class='prev' />")
                    $(".prev").attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#btn_up").change(function(){

            readURL(this);
        });
    });
</script>

Upvotes: 0

Views: 203

Answers (1)

Kiranramchandran
Kiranramchandran

Reputation: 2094

Try This Code

HTML

<input id="imgInput" type="file"  name="file[]" multiple style="display:none;"/>
        <input type="button" onclick="$('#imgInput').click();" value="Choose File" />
         <output id="result" ></output>

    <div style="margin-top:150px;" id="uploadedcontent"></div>

JS

        var ftype = new Array();

        $("#imgInput").change(function () {
            readURL(this);

        });
        function readURL(input) {
            var files = input.files;
            var output = document.getElementById("result");
            var count = 0;
             var count1 = 0;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var picReader = new FileReader();
                var divid = 'div_' + i;
                var spanid = 'span_' + i;
                picReader.addEventListener("load", function (event) {
                    var picFile = event.target;
                    var picnames = files[count].name;
                    var mimetypes = picFile.result.split(',');
                    var mimetype1 = mimetypes[0];
                    var mimetype = mimetype1.split(':')[1].split(';')[0];
                    count++;

                    var div = document.createElement("div");
                    div.setAttribute('id', 'div_' + count);
                    div.setAttribute('class', 'divclass');
                    if (mimetype.match('image')) {
                        div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";

                    }

                    output.insertBefore(div, null);

                });

                picReader.readAsDataURL(file);
            }
        }


$('body').on('click','.boxclose','',function(e){
       var spanid = $(this).attr('id');
            var splitval = spanid.split('_');
            $('#div_' + splitval[1]).remove();
});

DEMO HERE

Upvotes: 3

Related Questions