显示通过 html 表单上传的照片预览答案

【问题标题】：Show photo preview uploaded via html form显示通过 html 表单上传的照片预览
【发布时间】：2014-09-08 04:24:48
【问题描述】：

我有一个表单，允许用户上传 x 数量的图像。当他们从计算机中选择图像时，可以单击一个按钮，以便他们在提交表单之前预览图像。

有没有一种方法可以自动显示图像而无需单击预览按钮。目前，我正在使用 JS 的 .click 功能，但我希望用户不必单击任何内容即可查看他们上传的图像。

这是我正在使用的代码。

形式：

<div class="uploadWrapper">
    <p>Upload Images</p>
    <input type="file" name="files[]" multiple="true" id="files" style="left: 0px;" />
</div>
<input id="go" class="btn_img" type="button" value="Click to Preview Images">
<div id="images_upload"></div>
<script type="text/javascript">
    $("#files").click(function(){
        $(".btn_img").show();
    });
</script>

<?php include_once('upload/image-preview.php'); ?>

image-preview.php 文件：

<script type="text/javascript">
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#up_image').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

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


var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;


function readFile() {
    reader.readAsDataURL(imageFiles[i])
}

reader.onloadend = function(e) {


    var image = $('<img class="prev_img">').attr('src', e.target.result);
    $(image).appendTo('#images_upload');
    $( "#images_upload img" ).wrap( "<div class=\"an_image\">" );


    if (i < numFiles) {
        i++;
        readFile();
    }
};

$('#go').click(function() {

    imageFiles = document.getElementById('files').files

    numFiles = imageFiles.length;
    readFile();           

});
</script>

我需要做什么才能不必点击“点击预览图像”按钮来查看图像？

谢谢！

【问题讨论】：

Preview an image before it is uploaded的可能重复
@brian，谢谢。我读了那篇文章，我可以让一张图片工作，但不知道如何为多张图片做这件事。有什么想法吗？

标签： javascript jquery html image

【解决方案1】：

遍历input.files 并为每个文件创建一个new FileReader()。 jsFiddle Demo

HTML

<input type='file' class="imageUpload" multiple="true" />
<div class="imageOutput"></div>

$images = $('.images');

$(".imageUpload").change(function(){
    readURL(this);
});

function readURL(input) {

    if (input.files && input.files[0]) {

        $.each(input.files, function() {
            var reader = new FileReader();
            reader.onload = function (e) {           
                $images.append('<img src="'+ e.target.result+'" />')
            }
            reader.readAsDataURL(this);
        });

    }
}

【讨论】：

准确！ @Brian这把戏做得很好。我真的需要开始掌握JS。哈哈。感谢您的帮助，非常感谢。
实际上，@brian 对于上述答案，我还有一个问题......如何限制它的循环次数？
喜欢设置图片上传限制？因为目前它会循环选择许多图像。如果他们上传 10 个，而您的限制是 5 个，它只会切断其余部分。
所以你会在循环之前检查它并验证google.com/#q=input+file+limit

【解决方案2】：

谢谢@布莱恩

这就是我想出的。上限为 10。

$images = $('#images_upload')

$(".imageUpload").change(function(event){
    readURL(this);
});

function readURL(input) {

    if (input.files[10]) {
        alert('You can uploaded a maximum of 10 images');
    } else {
        if (input.files && input.files[0]) {
            $.each(input.files, function() {
                var reader = new FileReader();
                reader.onload = function (e) {           
                    $images.append('<img src="'+ e.target.result+'" />')
                    }
                    reader.readAsDataURL(this);
                });
            }                                              
        }
    }

【讨论】：