上传前多张图片预览答案

【问题标题】：Multiple image preview before upload上传前多张图片预览
【发布时间】：2014-09-27 14:12:58
【问题描述】：

我想预览多张图片，但问题是如果我要上传 2 张图片，我的代码就可以正常工作。我想预览用户上传的内容。

这是我的javascript：

var abc = 0; //Declaring and defining global increement variable

$(document).ready(function() {


$('#file').click(function() {
    $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
            $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
            $("<br/><br/>")
            ));
});

$('body').on('change', '#file', function(){
        if (this.files && this.files[0]) {
             abc += 1; //increementing global variable by 1

            var z = abc - 1;
            var x = $(this).parent().find('#previewimg' + z).remove();
            $(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");

            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);

            $(this).hide();
            $("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'x.png', alt: 'delete'}).click(function() {
            $(this).parent().parent().remove();
            }));
        }
    });

function imageIsLoaded(e) {
    $('#previewimg' + abc).attr('src', e.target.result);
};

$('#upload').click(function(e) {
    var name = $(":file").val();
    if (!name)
    {
        alert("First Image Must Be Selected");
        e.preventDefault();
    }
}); 
});

这是我的FIDDLE 需要你的帮助来解决它。

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Upload images with Jquery</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var storedFiles = [];      
                $('#myfiles').on('change', function() {
                    $('#messages').html('');
                    var myfiles = document.getElementById('myfiles');
                    var files = myfiles.files;
                    var i=0;
                    for (i = 0; i<files.length; i++) {
                        var readImg = new FileReader();
                        var file=files[i];
                        if(file.type.match('image.*')){
                            storedFiles.push(file);
                            readImg.onload = (function(file) {
                                return function(e) {
                                    $('#uploadedfiles').append('<tr class="imageinfo"><td><img width="80" height="70" src="'+e.target.result+'"/></td><td>'+file.name+'</td><td>'+Math.round((file.size/1024))+'KB</td><td><a href="" class="lnkcancelimage" file="'+file.name+'" title="Cancel"><img src="delete.png" width=34" height="34"/></a></td></tr>');
                                };
                            })(file);
                            readImg.readAsDataURL(file);
                        }else{
                            alert('the file '+file.name+' is not an image<br/>');
                        }
                    }
                });

                $('#uploadedfiles').on('click','a.lnkcancelimage',function(){
                    $(this).parent().parent().html('');
                    var file=$(this).attr('file');
                    for(var i=0;i<storedFiles.length;i++) {
                        if(storedFiles[i].name == file) {
                            storedFiles.splice(i,1);
                            break;
                        }
                    }
                    return false;
                });

                $('#lnkupload').click(function(){
                    var data = new FormData();
                    var i=0;
                    for(i=0; i<storedFiles.length; i++) {
                        data.append('files'+i, storedFiles[i]); 
                    }

                    if(i>0){
                        $.ajax({
                            url: 'load.php',
                            type: 'POST',
                            contentType: false,
                            data: data,
                            processData: false,
                            cache: false
                        }).done(function(msg) {
                            storedFiles = [];
                            if(msg){
                                alert(msg);
                            }else{
                                $('#messages').html('Images uploaded successfully');
                            }
                        }).fail(function() {
                            alert('error');
                        });
                    }
                    return false;
                });

            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <label><strong>Uploading multiple images</strong></label>
            <input id="myfiles" type="file" name="myfiles[]" multiple="multiple" />
            <a href="" id="lnkupload">Upload</a>
            <table id="uploadedfiles">
                <tr><th>Image</th><th>Name</th><th>Size</th><th>Actions</th></tr>
            </table>
        </div>
    </body>
</html>

【讨论】：

演示：lax-soft.tk/index.php/programacion/php-y-jquery/…
您好，谢谢您的代码，但删除按钮仅删除预览，但文件仍在输入字段中