上传之前预览图片

Question

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>

Answer 1

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