获取图像预览?

时间:2015-07-24 07:50:46

标签: javascript php html

我想添加图片上传功能,在上传文件之前,它应该显示预览。我的代码对于第一部分完全正常,如下面发布的图像所示,但无法弄清楚为什么它不适用于其余部分。我在每个块的末尾添加了图像上传功能,但它只显示第一个块的预览而不是其余的。 enter image description here

以下是相同的代码。

while($row = mysqli_fetch_array($result)){

<form enctype="multipart/form-data" id="form" action="" method="post">
        <input type="file"  id="image" name="img" onChange="readURL(this);"/>
        <img id="blah" src="#" alt="your image" /><br/><br/>
        <input type="button" value="upload" onclick="javascript:uploadInage();" />
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

function readURL(input) {

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

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

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


  }
</script>
}

这只是我所有PHP的一部分。

你可以帮我添加预览功能到所有块。

1 个答案:

答案 0 :(得分:0)

<script>

function readURL(input) {      
        if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            //$('#blah').attr('src', e.target.result).width(300).height(340);
             $(input).next('img').attr('src', e.target.result).width(300).height(340);
        };
        reader.readAsDataURL(input.files[0]);
    }

  }
</script>

之前使用过评论专线。将其更改为下一行并完美运行。