代码之家 › 专栏 › 技术社区 › user1651520

使用动态创建的输入元素在上传前预览图像

image-upload jquery

user1651520 · 技术社区 · 11 年前

我使用jQuery动态添加表单组:

<form>
    <div id="form-group-wrapper">
        <div class="row">
            <input class="userfile" name="userfile[]">
            <img src="default.png" class="preview-image" />
        </div>
    </div>
    <button type="submit">POST</button>
    <button type="button" id="copy-btn">Add new row</button>
</form>
<div id="hide-ele">
    <div class="row">
        <input class="userfile" name="userfile[]">
        <img src="default.png" class="preview-image" />
    </div>
</div>

jQuery是:

$('#copy-btn').click(function(){
    newOne = $('#hide-ele').html();
    $('#form-group-wrapper').append(newOne);
});

$(function() {
    $(".userfile").on("change", function() {
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return;

        if (/^image/.test( files[0].type)){
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onloadend = function(){
                $(".preview-image").attr('src', this.result);
            }
        }
    });
});

当我通过单击“添加新行”按钮创建新表单组时,它无法预览所选图像。知道我该怎么解决吗? 谢谢

1 回复 | 直到 11 年前

Rupali 11 年前

添加新元素后,必须绑定 change 此外,我们还为他们举办了一场活动。尝试以下代码。

function imagePreview() {
    $(".userfile").unbind('change').bind("change", function() {
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return;

        if (/^image/.test( files[0].type)){
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onloadend = function(){
            //Changed below line as well to show preview next to the changed element
                $(this).next(".preview-image").attr('src', this.result);
            }
        }
    });
}
$('#copy-btn').click(function(){
    newOne = $('#hide-ele').html();
    $('#form-group-wrapper').append(newOne);
    imagePreview();
});
$(function() {
    imagePreview();
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

12 月前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前