Question

我想在上传之前预览多张图片。其次，如果我选择了错误的文件，我想删除/取消选择所选文件。我正在研究jquery代码，但它一次预览一个图像。另外，我想一次选择多个图像。

以下是 jquery 代码。

$(document).ready(function() {

//To add new input file field dynamically, on click of "Add More Files" button below function will be executed
$('#add_more').click(function() {
    $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
            $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
            $("<br/><br/>")
            ));
});

//following function will executes on change event of file input to select different file   
$('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();
            }));
        }
    });

//To preview image     
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();
    }
});
});

以下是 HTML 代码

<div id="formdiv">
            <h2>Multiple Image Upload Form</h2>
            <form enctype="multipart/form-data" action="" method="post">
                First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 100KB.
                <hr/>
                <div id="filediv"><input name="file[]" multiple type="file" id="file"/></div><br/>

                <input type="button" id="add_more" class="upload" value="Add More Files"/>
                <input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
            </form>
            <br/>
            <br/>
            <!-------Including PHP Script here------>
            <?php include "upload.php"; ?>
        </div>

Answer 1

也许你可以看到这个主题，我认为它有你需要的东西。的 Create live preview of image (before upload it) using JQuery

你也可以尝试一下

http://www.aspsnippets.com/Articles/Show-Display-image-preview-before-upload-using-jQuery.aspx

Answer 2

您可以在http://www.fyneworks.com/jquery/multifile/

上找到示例

也许您可以提取代码的各个部分来编写自定义。

Answer 3

对于图像预览，您可以使用URL.createObjectURL javascript功能。示例：

$('body').on('change', '#file', function(){
     if (this.files && this.files[0]) {
           var URL  = window.URL || window.webkitURL;
           var img  = $('<img />').attr('src', URL.createObjectURL(this.files[0] ) );
     }
});

如果您需要完整的上传器，您还可以尝试：http://www.albanx.com/ajaxuploader/或其他在线示例

上传前预览多个图像

3 个答案: