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

Posted 2023-05-07

【中文标题】使用 JavaScript/jQuery 从输入类型“文件”中获取二进制图像数据，以便在 WebMatrix 中使用 AJAX 进行图片预览 [重复]

【英文标题】：Get binary image data from input type "file" using JavaScript/jQuery for use with picture preview with AJAX in WebMatrix [duplicate]

【发布时间】：2012-10-22 10:15:11

【问题描述】：

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

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

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

再一次，这甚至可能是不可能的，但只要我能得到二进制图像数据，我相信我可以用 AJAX 将它推送到服务器，并以与我从中获取图像相同的方式处理图像一个数据库（请注意，我不使用 GUID 来保存图像文件本身，我只是保存二进制数据）。

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

**********更新***********

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

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

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

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

【问题讨论】：

尝试浏览答案 [此处][1]。 [1]：***.com/questions/4459379/…

@PavelAnossov 我对你的回答唯一感到遗憾的是你没有把它放在真正的答案形式中，而且我不能投票回答 8000 次！为什么这个解决方案没有在 Internet 上更普遍？完美运行！比我尝试做的要容易得多！如果您发布答案，我很乐意接受！

我确实把它作为一个答案，它被转换为一个评论作为一个微不足道的答案。

@PavelAnossov 好吧，那太臭了……哈哈

@PavelAnossov 有没有可以在 IE 中运行而无需使用 AJAX 或服务器端的版本？

【参考方案1】：

简答：使用jQuery form plugin，它支持类似 AJAX 的表单提交，即使是文件上传。

tl;博士

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

上传 RAW 图像 调整图像大小并优化数据存储 生成指向该文件的临时链接（通常存储在服务器维护的 HTTP 会话中） 将其发回给用户，以启用“预览” 用户确认图片后实际存储图片

一些不好的解决方案是：

大多数现代浏览器都有启用脚本访问本地文件的选项，但通常您不会要求用户修改这些低级设置。 早期的 Internet Explorer（啊……是的，真可惜）和现代浏览器的古代版本会通过读取文件输入框的“值”来暴露完整的文件路径，您可以直接生成标签并使用该值. （现在它被一些 c:/fakepath/... 东西取代了。） 使用Adobe Flash模拟文件选择面板，可以正确读取本地文件。但是将其传递给 JavaScript 是另一个话题……

希望这些对您有所帮助。 ;)

更新

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

// 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);

【讨论】：

感谢您的回复，非常非常感谢您展示了不该做什么。我可以看到有些人尝试您在此处列出的错误解决方案，甚至我也可以看到他们的缺点。然而，我确实非常远离插件。我从来没有完全控制它们或为了我的特定目的而完全集成。然而，上面的评论者确实把我送到了这个网站，这太完美了！

FileReader 是在 HTML5 时代引入和实现的，很高兴知道您只针对新浏览器。兼容性是一个真正令人头疼的问题。 ;)

嗯....没有意识到它在 IE 中不起作用，研究这表明我必须使用 AJAX 或临时文件才能让它在那里工作。这是真的？或者有没有办法只像这个解决方案一样将 IE 包含在 JavaScript 中？可能不会，但如果他们使用 IE，也许我只是不让他们预览。毕竟，如果您使用 IE，那么您就不应该获得任何好处...

您做出选择。通常来说，边缘技术最好被视为一些基本功能的附加，因为它们不像传统方式那样得到保证。