提交前预览图像

Preview image before submit.

本文关键字：图像 提交      更新时间：2023-10-04

我有一个这样的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作为标识符。我试过这个脚本作为参考。

这里是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演示

相关文章：