将缩略图和删除按钮添加到表单文件输入答案

【问题标题】：Adding thumbnails and remove button to a form file input将缩略图和删除按钮添加到表单文件输入
【发布时间】：2014-02-14 23:22:44
【问题描述】：

我正在使用 Rails，我有一个包含一堆字段的表单，其中一个是图像上传。现在它只是一个带有多个选项的典型按钮，它几乎可以完成我需要的一切，但我希望在用户选择图像时显示图像的预览（缩略图）并且我希望有一个“删除”按钮这些缩略图，以防用户决定从集合中删除某些图像。

我尝试使用dropzone.js，但我不想将表单作为 JSON 发送，我希望文件成为文件输入字段的一部分。我也尝试使用Jquery File Upload，但我对这一切感到困惑，所以我尝试只使用FileReader API，这是我需要的，但我无法添加删除按钮......我也不喜欢要为此使用 ajax，我认为没有它可以以某种方式完成，而且我不需要拖放功能。

无论如何，我认为这应该是一件容易的事情，但我找不到任何合适的教程或其他东西，所以我希望获得一些教程的链接或只是一些有助于我解决问题的提示.

谢谢。

【问题讨论】：

标签： javascript jquery ruby-on-rails file-upload thumbnails

【解决方案1】：

您可以使用画布和 FileReader API。像这样的：

$('#yourFileInputField').bind('change', function(e) {
  var reader;
  reader = new FileReader();
  reader.onload = function(event) {
    var img;
    img = new Image();
    img.onload = function() {
      var canvas, context;
      canvas = $('#canvasId')[0];
      context = canvas.getContext('2d');
      context.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
  };
  reader.readAsDataURL(e.target.files[0]);
});

当您单击删除时，只需清除画布和文件输入字段。

【讨论】：

我明白了，但是如果用户选择了 5 张图片，然后单击了一张图片上的删除按钮，我如何从文件输入中只删除这张图片并保留其余 4 张？
您的输入是动态创建的吗？您可以用
包装您的输入和画布，将输入的 onchange 事件添加到某个函数（让它调用 imageSelected）。 imageSelected 的主体看起来像我上面的代码（只是处理程序）。 'e' 参数是输入，所以我们可以通过父 div 访问画布。
并删除按钮包含到此包装器 div。在这种情况下，您可以访问画布和输入。只需将 onclick 事件附加到类似（使用 jQuery）函数 removeButtonClicked () { $(this).parent().children('input') 或 canvas } 即可清除它们。