Question

我想使用jQuery File Upload插件将图片直接上传到所选的div中。我有这个网格，我想上传照片：

<div id="grid">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

在每个div.box我都有一个用于上传图片的按钮和一个用于显示可上传和上传文件的表格：

<div class="box">
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Upload a photo</span>
        <input type="file" name="files[]" multiple>
    </span>
    <table role="presentation" class="table table-striped">
        <tbody class="files"></tbody>
    </table>
</div>

问题是，当我上传第一个div中的图像时，会显示在最后一个div上。我在这里的测试：index.html

如何将上传的图像显示在当前选定的div中？

感谢任何帮助。非常感谢你，抱歉我的英文不好！

Answer 1

您也许可以尝试

$('.box').click(function() {
if ($(this).html() === 'click to add photo') {
    var src = prompt('what is the image address of what you wish to see')
        if(src!==null){
    $(this).html("<img src='" + src + "'/>")
      }else{
        $(this).html('click to add photo');
      }
} else {
    var src = prompt('what is the image address of what you wish to see')
    $(this).append("<img src='" + src + "'/>")
}
})

<div class="box">click to add photo</div>
<div class="box">click to add photo</div>
<div class="box">click to add photo</div>
<div class="box">click to add photo</div>

如何将上传的图像显示到当前选定的div中？

1 个答案: