Question

在通过html表格上传多个图片之前，我希望全部内联查看它们，例如在我称为占位符的div中。

多重上传方法是使用javascript生成新的browse按钮。因此，当点击一个按钮时，将显示新的按钮。

Here is the js code that generates new bottons:

$(function(){
$('#image1').on('click',function(){
                var r= $('<input type="file" name="image2" id="image2"/>')
            .on('click',function(){
                var r= $('<input type="file" value="new button" name="third-image" id="third-image"/>')
            .on('click',function(){
                var r= $('<input type="file" value="new button" name="fourth-image" id="fourth-image"/>');
    $("form").append(r);
});;
    $("form").append(r);
});
    $("form").append(r);
});
});

Here is the js code that will view the uploading image

<script type="text/javascript">
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]);
    }
}

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

<script type="text/javascript">
function readURL1(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah1').attr('src', e.target.result);
        }

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

$("#image2").change(function(){
    readURL1(this);
});

Here is my html form

    <form id="formulir" method="post"  enctype="multipart/form-data" action="config-template-ecomerce.php">
    title-file<input  name="title" type="text" id="title"/><br>     
    color-one<input  name="color-one" type="text" id="color-one"/><br>

    <img id="uploadPreview" style="width: 100px;" /><br>

    image<input type="file" name="image1" id="image1"/><br>

    <img id="blah" src="#" style="width:300px;" />
    <img id="blah1" src="#" style="width:300px;" />
    <img id="blah2" src="#" style="width:300px;" />
    <img id="blah3" src="#" style="width:300px;" /><br>

    submit<input type="submit" name="button" id="button" value="Submit" />

</form>

我遇到的问题是，查看图像的js代码只能查看一个图像。当我浏览第二张图片时，无法查看。

Here is my FIDDLE

在占位符中内嵌查看多个上传图像

0 个答案: