javascript - 如何将上传的图片显示到当前选定的div中？(How to display uploaded image into the current selected div?)

Question

I would like to upload images directly into the selected div using jQuery File Upload plugin.(我想使用jQuery File Upload插件将图像直接上传到选定的div中。)

I have this grid where I want to upload photos:(我有一个要上传照片的网格：) <div id="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> In each div.box I have a button for uploading images and a table for displaying file available for upload and the uploaded:(在每个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> The problem is that when I upload an image in the first div is displayed on the last div.(问题是，当我在第一个div中上传图像时，最后一个div中会显示该图像。) My Test here: index.html(我的测试在这里： index.html) How can I display the uploaded image into the current selected div?(如何将上传的图片显示到当前选定的div中？) Any help is appreciated.(任何帮助表示赞赏。) Thank you so much and sorry for my bad english!(非常感谢您，我的英语不好！)   ask by Mustapha Aoussar translate from so

Answer 1

You could maybe try this(你也许可以试试这个)

$('.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>