图片上传前的多个缩略图
Multiple thumbnails before image upload
本文关键字:略图 更新时间:2023-09-26
我对Javascript/Jquery非常缺乏经验,因此我使用JavaScript加载图像插件来处理图像上传过程的前端。
问题:
我想上传多张图片,而不仅仅是一张,因此还想显示所有要作为缩略图上传的图像。目前,只有一个图像显示为缩略图。
小提琴:https://jsfiddle.net/r7s3n64b/1/(仅显示一个缩略图(
网页(相关部分(
<!-- 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>
我尝试循环访问要上传的图像:
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
},
我将非常感谢任何形式的帮助!
=== E D I T ===
在您的小提琴中,缩略图放置在结束表单标签之后:
</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">
在我的项目中(使用您的代码(,缩略图放置在结果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>
你有没有可能碰巧知道为什么会这样,或者我该如何改变?!
非常感谢您的巨大帮助!
您需要将更改函数更改为:
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
);
}
};
这是更新的jsFiddle:https://jsfiddle.net/r7s3n64b/2/
之前,事件处理程序如下所示:
document.getElementById('upload-post-images').onchange = function (e) {
loadImage(
e.target.files[0],
function (img) {
document.body.appendChild(img);
},
{maxWidth: 200} // Options
);
};
所以因为这行:
e.target.files[0]
您始终只从图像数组中传递一个图像(第一个(。
享受! :)
更新
关于您的更新 - 所以基本上都是关于 loadImage 函数中的第二个参数。
更改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
)
});
};
更新的小提琴
相关文章:
- 通过点击按钮翻转缩略图
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 如何解析Brightcove视频中的视频缩略图
- 如何删除视频's缩略图时's加载在JW Player's闪光模式
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- jQuery AJAX获取Vimeo缩略图
- 如何获取youtube视频的缩略图
- 将不同上传的文件显示为缩略图或任何其他方式
- 如何将缩略图链接到新页面上的视频
- simpleCart js缩略图未定义
- 在Codrops的内容中添加数组元素展开缩略图网格预览
- 在将缩略图链接到模态时遇到问题
- 用较大的图像交换缩略图
- 不应选择缩略图优先图像
- 包含多个缩略图幻灯片的公文包
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 尝试制作youtube视频的缩略图,并在单击时将其放大
- 缩略图图像滑块
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 从Spring应用程序运行PhantomJS以获取网页缩略图