Question

图像是选择照片的按钮。选择图像后，查看所选图像并生成新图像按钮。我只能使用ID来获取1个参数。我怎么能为多个文件做到这一点？

document.getElementById('imgInp').onclick = function() {
    document.getElementById('fileinpt').click();
};

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

        reader.onload = function (e) {
            $('#imgInp').attr('src', e.target.result);
            $('.imgpc').after('<div class="col-sm-4 col-xs-6 imgpc"><div class="imagepreview"><span></span><img id="imgInp" src="images/add-photo.png" alt="Add more photo" /><input type="file" id="fileinpt" class="hidden"></div></div>');
        }

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

$("#fileinpt").change(function(){
    readURL(this);
});

以下是DEMO

Answer 1

尝试使用此更新的jquery

$(document).off('click', '#imgInp').on('click', '#imgInp', function (e) {
        $('#fileinpt').click();
});

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

        reader.onload = function (e) {
            $('#imgInp').attr('src', e.target.result);                
            $('#imgInp').attr("id", "newimgInp");            

            $('.imgpc').append('<div class="imagepreview"><span></span><img id="imgInp" src="images/add-photo.png" alt="Add more photo" /></div>');
        }

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

$("#fileinpt").change(function(){
    readURL(this);
});

相同的jsfiddle

https://jsfiddle.net/jshp6zst/3/

预览动态输入的上传照片

1 个答案: