上传前多张图片预览

Posted

技术标签:

【中文标题】上传前多张图片预览【英文标题】：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 需要你的帮助来解决它。

【问题讨论】：

【参考方案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   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" /></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/… 您好，谢谢您的代码，但删除按钮仅删除预览，但文件仍在输入字段中

以上是关于上传前多张图片预览的主要内容，如果未能解决你的问题，请参考以下文章

上传多张图片预览

Android仿微信图片上传，可以选择多张图片，缩放预览，拍照上传等

Android仿微信图片上传，可以选择多张图片，缩放预览，拍照上传等

带预览和删除、Jquery 和 Javascript 的多张图片上传

微信小程序如何给服务器上传多张图片,微信小程序实现上传多张本地图片到服务器和图片预览...

vue实现多张图片上传与预览