[英]Multiple thumbnails before image upload
I am very unexperienced in Javascript/Jquery therefore I use the JavaScript Load Image plugin to handle the front end of my image upload process. 我对Javascript / Jquery缺乏经验,因此我使用JavaScript Load Image插件来处理图像上传过程的前端。
The Problem: 问题:
I would like to upload multiple images , not just one, and therefore also would like to display all the images, which are to be uploaded as a thumbnail . 我想上传多张图片 ,而不仅仅是一张图片 ,因此我还想显示所有要作为缩略图上传的图片 。 At the moment just one image is shown as a thumbnail.
目前,只有一幅图像显示为缩略图。
The Fiddle: https://jsfiddle.net/r7s3n64b/1/ (displaying just one thumbnail) 小提琴: https : //jsfiddle.net/r7s3n64b/1/ (仅显示一个缩略图)
HTML (the relevant parts) HTML (相关部分)
<!-- FILE INPUT -->
<p><input type="file" name="images[]" id="upload-post-images" multiple></p>
<!-- THUMBNAILS -->
<div id="result" class="result">
<p>This only works in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p>
</div><br>
My attempt to loop through the to be uploaded images: 我试图遍历要上传的图片:
replaceResults = function (img) {
var content;
var imageFiles = document.getElementById("upload-post-images"),
filesLength = imageFiles.files.length;
// Loop through the FileList and render image files as thumbnails.
for (var i = 0; i < filesLength; i++) {
if (!(img.src || img instanceof HTMLCanvasElement)) {
content = $('<span>Die Bilddatei konnte nicht geladen werden.</span>');
} else {
content = $('<a target="_blank">').append(img)
.attr('download', currentFile.name)
.attr('href', img.src || img.toDataURL());
}
result.children().replaceWith(content);
if (img.getContext) {
actionsNode.show();
}
} // end for loop
},
I would be very thankful for any kind of help!! 我将非常感谢您提供的任何帮助!
=== EDIT === ===编辑===
In your fiddle the thumbnails are placed after the closing form tag: 在您的小提琴中 ,缩略图放置在结束表单标签之后:
</form>
<img src="blob:https%3A//fiddle.jshell.net/001bd1f5-1cce-4618-bc83-9c8bd24f9e90" width="200" height="150">
<img src="blob:https%3A//fiddle.jshell.net/001bd1f5-1cce-4618-bc83-9c8bd24f9e90" width="200" height="150">
In my project (using your code) the thumbnail is placed within the result div: 在我的项目中(使用您的代码),缩略图被放置在结果div中:
<div id="result" class="result">
<a target="_blank" download="image.jpg" href="data:image/png;base64,iVBO3sSxiFIz6LUNoB9b27d/p9/HzNSojY7M+FCmPOnGAsrVBWlKSGsSfG4GBNOzbIWtW38xtqwSLsTpzHF7/N4n7PwQgrIo5fh...></a>
<canvas width="265" height="354"></canvas>
</div>
Is there any chance that you would happen to have an idea why this is or how I could change that?! 您是否有机会知道为什么会这样,或者我将如何改变呢?!
Thank you so much for your tremendous help! 非常感谢您的大力帮助!
You need to change your on change function to this: 您需要将on change函数更改为此:
document.getElementById('upload-post-images').onchange = function (e) {
for(i = 0; i<=e.target.files.length; i++)
{
loadImage(
e.target.files[i],
function (img) {
document.body.appendChild(img);
},
{maxWidth: 200} // Options
);
}
};
Here is updated jsFiddle: https://jsfiddle.net/r7s3n64b/2/ 这是更新的jsFiddle: https ://jsfiddle.net/r7s3n64b/2/
Earlier your event handler looked like this: 之前的事件处理程序如下所示:
document.getElementById('upload-post-images').onchange = function (e) {
loadImage(
e.target.files[0],
function (img) {
document.body.appendChild(img);
},
{maxWidth: 200} // Options
);
};
So beacuse of this line: 因此,由于此行:
e.target.files[0]
You always pass only one image (first) from image array. 您始终仅传递图像阵列中的一个图像(第一幅)。
Enjoy! 请享用! :)
:)
UPDATE UPDATE
Regarding your update - so basically it's all about the second parameter in loadImage function. 关于您的更新-因此,基本上所有内容都与loadImage函数中的第二个参数有关。
Change your upload-post-images
change event like following. 如下更改您的
upload-post-images
更改事件。
document.getElementById('upload-post-images').onchange = function (e) {
$.each(e.target.files, function () {
loadImage(
this,
function (img) {
document.body.appendChild(img);
}, {
maxWidth: 200
} // Options
)
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.