两次上传相同的图像文件 - Javascript答案

【问题标题】：Upload the same image file twice - Javascript两次上传相同的图像文件 - Javascript
【发布时间】：2013-07-13 14:20:52
【问题描述】：

我的绘图应用程序中有一个用 Javascript 编写的图像上传器。我想允许用户在画布上放置多个相同的图像。但是，当我尝试上传已经在画布上的图像时，什么都没有发生，并且上传者的事件处理程序中的断点永远不会被击中。发生了什么事，我该如何解决？谢谢！

这是我的图像处理程序的代码：

function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
  var img = new Image();
  img.onload = function() {
    img.className = 'drag';
    img.style.left = 0;
    img.style.top = 0;
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10));
    images.push(img);
  }
  img.src = event.target.result;
 }
 reader.readAsDataURL(e.target.files[0]);
 };

【问题讨论】：

为什么要多次上传同一个文件？重复使用上传的文件！
我只是认为这是用户插入重复图像最直观的方式。
除了再次上传同一张图片之外，用户如何表示他们想要一张图片中的两张在画布上？
这里没有上传...
嗯，你怎么确定现在是同一张图片？

标签： javascript image-upload

【解决方案1】：

我确实倾向于同意 Rene Pot 再次使用相同的图像（重复按钮），但您仍然不能阻止用户再次插入/加载相同的图像。我前段时间遇到过这个问题，使用这段代码检查图像是否已经缓存（如果缓存，则没有加载，因此也不会触发 onload）。

var img = new Image();
img.src = event.target.result;

var insertImage = function() {
    img.className = 'drag';
    img.style.left = 0;
    img.style.top = 0;
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10));
    images.push(img);
  }

if(img.complete){
   img.onload = insertImage;
} else {
   insertImage();
}

希望对您有所帮助。

【讨论】：