使用JavaScript / jQuery从输入类型“file”获取二进制图像数据，以便在WebMatrix中使用AJAX进行图片预览


Get binary image data from input type “file” using JavaScript/jQuery for use with picture preview with AJAX in WebMatrix

本问题已经有最佳答案，请猛点这里访问。

我在研究或试图弄清楚如何(如果它甚至可能)从类型文件的html输入元素使用JavaScript / jQuery获取二进制图像数据时遇到了麻烦。

我正在使用WebMatrix(C＃)，但如果仅使用JavaScript / jQuery可以回答这个问题的目的，则可能没有必要知道。

我可以拍摄图像，将其保存在数据库中(作为二进制数据)，然后在发布后从二进制数据中显示页面上的图片。然而，在上传之前，这确实让我没有图片预览，我几乎可以肯定我必须使用AJAX。

同样，这甚至可能都不可能，但只要我能获得二进制图像数据，我相信我可以用AJAX将它推送到服务器并以与从数据库中获取它时相同的方式处理图像(请注意，我不使用GUID保存图像文件，所有这些，我只保存二进制数据)。

如果有一种更简单的方法来显示使用输入元素的图片预览，那当然也可以正常工作，因为我尝试这样做的整个想法是在他们点击提交表单按钮之前显示图片预览(或至少创造这种错觉)。

********** UPDATE ***********

我不认为这是另一个问题的重复，因为，我真正的问题是：

如何使用JavaScript / jQuery从输入类型"文件"获取图像数据？

如果我可以将数据(格式正确)返回给服务器，我应该可以在那里使用它，然后用AJAX返回它(尽管，我绝对不是AJAX专家)。

根据我所做的研究，没有办法在仅使用javascript的所有IE版本中获取图片预览(这是因为他们认为获取完整文件路径是潜在的安全风险)。我可以要求我的用户将该网站添加到受信任的网站，但您通常不会要求用户篡改这些类型的设置(更不用说让您的网站对用户显得怀疑的最快方法就是直接让他们要求将您的网站添加到可信站点列表。这就像发送电子邮件并要求输入密码。"只要相信我！我太安全了！":)

相关讨论

简短的回答：使用jQuery表单插件，它支持类似AJAX的表单提交甚至文件上传。

TL;博士

缩略图预览是流行的网站，通常由多个步骤完成，基本上网站做这些步骤：

  • 上传RAW图像
  • 调整大小并优化图像以进行数据存储
  • 生成到该文件的临时链接(通常存储在服务器维护的HTTP会话中)
  • 将其发回给用户，以启用"预览"
  • 实际上在用户确认图像后存储图像

    • 一些不好的解决方案是：

  • 大多数现代浏览器都有选项来启用对本地文件的脚本访问，但通常您不会要求用户修改这些低级别设置。
  • 早期的Internet Explorer(啊...是的，这是一种耻辱)和现代浏览器的古老版本将通过读取文件输入框的"值"来公开完整的文件路径，您可以直接生成标记并使用该值。 (现在用一些c：/ fakepath / ......替换它。)
  • 使用Adobe Flash模仿文件选择面板，它可以正确读取本地文件。但将其传递给JavaScript是另一个话题......

    • 希望这些有帮助。 ;)

    UPDATE

    我实际上遇到过需要在上传之前进行预览的情况，我还想把它放在这里。我记得，现代浏览器中没有过渡版本在屏蔽真实文件路径之前没有实现FileReader，但如果是这样，请随时纠正我。这个解决方案应该适合大多数浏览器，只要它们受jQuery支持。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // 1. Listen to change event
    $(':file').change(function() {
      // 2. Check if it has the FileReader class
      if (!this.files) {
        // 2.1. Old enough to assume a real path
        setPreview(this.value);
      }
      else {
        // 2.2. Read the file content.
        var reader = new FileReader();

        reader.onload = function() {
          setPreview(reader.result);
        };

        reader.readAsDataURL();
      }
    });

    function setPreview(url) {
      // Do preview things.
      $('.preview').attr('src', url);
    }
    相关讨论