php - 如何创建带预览的图像 uploader

Question

我想要一个包含多个部分的表单。

第一部分是图像，多个文件上传，并在实际上传之前预览图像。

第二部分有各种文本表单字段。

我使用 PHP 和 MySQL 构建了第二部分，并且可以正常工作，并且图像上传也可以正常工作。但我不知道如何在提交表单之前显示图像预览。

编辑:

使用代码形成答案:

     <input type='file' onchange="readURL(this);" />
     <img id="blah" src="#" alt="your image" />

与:

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

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

效果很好，但只显示 1 个缩略图。我想为每个文件动态创建图像缩略图。

我正在努力:

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
          var container = $('#previews');
          var image = $('<img>').attr('src', e.target.result).width(150);
          image.appendTo(container);
            };

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

与:

    <input type='file' name="files[]" onchange="readURL(this);" multiple />
    <div id="previews"></div>

这可行，但如何为每个输入的文件循环它？

Answer 1

看一下:

http://jsbin.com/uboqu3/1/edit

摘自 stackoverflow 上的这篇文章: Preview an image before it is uploaded

卢锡安