Question

我有一个像这样的HTML脚本：

<div class="gallery">
    <output id="show_img1"></output>
</div>
<div class="fileinput-button">
    <input type="file" id="files1" name="files[]"/>                     
</div>
<div class="gallery">
    <output id="show_img2"></output>
</div>
<div class="fileinput-button">
    <input type="file" id="files2" name="files[]"/>
</div>
<div class="gallery">
    <output id="show_img3"></output>
</div>
<div class="fileinput-button">
    <input type="file" id="files3" name="files[]"/>
</div>

我想要在标签<output></output>中选择的预览图像，ID如上所述作为标识符。我已尝试将此script作为参考。

Answer 1

此处是img代码

上的图片预览示例

<input type="file" id="files1" name="files[]"/>
    <img id="blah" src="#" alt="your image" />

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/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);
        }            
        reader.readAsDataURL(input.files[0]);
    }
}

$("#files1").change(function(){
    readURL(this);
});
</script>

JS Fiddle Demo

提交前预览图像。

1 个答案: