[英]SELECT image from preview before upload
I'm trying to make a javascript function to let people select a primary image after selected their images and right before the upload.我正在尝试制作 javascript function 以让人们 select 在选择他们的图像之后和上传之前成为主图像。 I'm using an image-uploader JS lbirary from Christian Bayer.
我正在使用 Christian Bayer 的图像上传器 JS 图书馆。 It gives several options, for example I can preview the images, I can delete them etc. Bt it also means that I only have this in my html part:
它提供了几个选项,例如我可以预览图像,我可以删除它们等等。这也意味着我的 html 部分只有这个:
<div class="input-images" name="thumbnailimage"></div>
So I can't really use onclick event or anything here.所以我真的不能在这里使用 onclick 事件或任何东西。 I'm trying to select the images by adding each preview image an onclick event and I want to put it's path into a hidden input, so I can upload it to a different table.
我正在尝试通过将每个预览图像添加 onclick 事件来 select 图像,并且我想将其路径放入隐藏输入中,因此我可以将其上传到不同的表。 This is how my div looks like after adding images:
这是添加图像后我的 div 的样子:
<div class="uploaded">
<div class="uploaded-image" data-index="0" id="image-0">
<img src="blob:http://localhost/11388451-d0be-454c-aabe-20a77e8c8835">
<button class="delete-image"><i class="iui-close"></i></button>
</div>
<div class="uploaded-image" data-index="1" id="image-1">
<img src="blob:http://localhost/5920bf98-8b23-4bb2-b573-20fe94620437">
<button class="delete-image"><i class="iui-close"></i></button>
</div>
</div>
I'm trying to get the images this way:我正在尝试以这种方式获取图像:
$('#image-upload').change(function() {
if ($(this).val().length) {
var foo = document.getElementsByClassName('uploaded-image');
console.log(foo);
} else {
foo = "";
}
});
But how can I add onclick event to each image to select them and be able to copy it to a hidden input?但是如何将 onclick 事件添加到每个图像到 select 并能够将其复制到隐藏输入?
Please review the following example:请查看以下示例:
https://jsfiddle.net/Twisty/mbvqoyn4/14/ https://jsfiddle.net/Twisty/mbvqoyn4/14/
JavaScript JavaScript
$(function() {
var selected = [];
$('.input-images-1').imageUploader();
$(".uploaded").on("dblclick", "img", function() {
console.log("Double Click on Image", $(this).attr("src"));
selected.push({
id: $(this).parent().data("index"),
src: $(this).attr("src")
});
$(this).parent().addClass("selected-image");
console.log(selected);
});
});
I moved the event to a Double Click as there is already a Click event assigned to the parent of the Image that is bubbling up:我将事件移动到双击,因为已经有一个 Click 事件分配给正在冒泡的图像的父级:
function(e) {
d(e)
}
But you can see how you can bind an event to the dynamically created object using the .on()
method.但是您可以看到如何使用
.on()
方法将事件绑定到动态创建的 object。 I then store these in an array and you can then send this data to a hidden field or use AJAX to send it to your server in the background.然后我将它们存储在一个数组中,然后您可以将此数据发送到隐藏字段或使用 AJAX 在后台将其发送到您的服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.