使用File API只能同时允许一张图像？
[英]Only allow one image at the same time with File API?
问题描述
Only allow one image at the same time with File API? 
使用File API只能同时允许一张图像？ What's the correct method to set the restriction for only one image at the same time? 在同一时间仅对一张图像设置限制的正确方法是什么？
<input id="browse" type="file" multiple> <div id="imgs"></div> <style type="text/css"> #imgs { height: imageheight; width: imagewidth; position: absolute; top: 39px; left: 9px; } </style> <script type="text/javascript"> window.URL = window.URL || window.webkitURL; var elBrowse = document.getElementById("browse"), elPic = document.getElementById("imgs"), useBlob = false && window.URL; function readImage(file) { var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); image.addEventListener("load", function() { elPic.appendChild(this); }); image.src = useBlob ? window.URL.createObjectURL(file) : reader.result; }); reader.readAsDataURL(file); } elBrowse.addEventListener("change", function() { var files = this.files; { for (var i = 0; i < files.length; i++) { var file = files[i]; if ((/\\.(png|jpeg|jpg|gif)$/i).test(file.name)) { readImage(file); } } } }); </script>
2 个解决方案
解决方案1
1 2018-04-22 19:35:41
One solution could be a promise chain like this: 一种解决方案可能是像这样的承诺链：
function readImage(file) {
//wrap readImage body into a promise
return new Promise((resolve) => {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.addEventListener("load", function () {
elPic.appendChild(this);
//resolve the promise after the child is appended so the caller would know when to start the next one
resolve();
});
image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
});
reader.readAsDataURL(file);
});
}
elBrowse.addEventListener("change", function () {
var files = this.files; {
//start the chain
var chain = Promise.resolve();
for (var i = 0; i < files.length; i++) {
//use let to have properly scoped variable
let file = files[i];
if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) {
//append functions to call to the chain
chain = chain.then(() => readImage(file));
}
}
}
});
The call to the next readImage() is performed after resolve() is called in the previous one - after the image is loaded and appended. 下一个readImage（）的调用在上一个中的resolve（）被调用之后执行-加载并附加图像之后。
You might want to consider using loadend event also, it is emitted even when the loading fails for some reason so it won't break your chain. 您可能还想考虑使用loadend事件，即使由于某种原因导致加载失败，该事件也会发出，因此不会破坏您的链。 https://developer.mozilla.org/en-US/docs/Web/Events/loadend https://developer.mozilla.org/en-US/docs/Web/Events/loadend
解决方案2
0 2018-04-23 11:23:40
I started a new approach that leads to the desired result. 我开始了一种新的方法，可以达到预期的效果。
<body style="margin:8px"> <img style="position:absolute; top:39px; left:9px" height="imageheight" width="imagewidth"> <input type="file" onchange="previewFile()"> <script type="text/javascript"> function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { preview.src = reader.result; }, false); if ((/\\.(png|jpeg|jpg|gif)$/i).test(file.name)) { reader.readAsDataURL(file); } } </script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.