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

卢西恩

Answer 2

除非在界面上使用java，否则无法在服务器上显示图像之前显示预览。

Answer 3

您可以使用HTML5 canvas和FileReader组件

执行此操作

查看js fiddle here

如何使用预览创建图像上传器

3 个答案: