0

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

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

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

我使用 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>

哪个有效,但是如何为每个输入的文件循环它?

4

3 回答 3

1

看看那个:

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

来自stackoverflow上的这篇文章: 在上传之前预览图像

卢西安

于 2013-02-09T20:34:52.057 回答
0

在服务器上有图像之前,您不能显示预览,除非您在界面上使用 java

于 2013-02-09T20:31:16.610 回答
0

您可以使用HTML5画布和FileReader组件来执行此操作

在这里看看js fiddle

于 2013-02-09T20:38:07.067 回答