6

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

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

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

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

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

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

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

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

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

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

4

1 回答 1

4

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

tl;博士

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

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

一些不好的解决方案是：

  1. 大多数现代浏览器都有启用脚本访问本地文件的选项，但通常您不会要求您的用户修改这些低级设置。
  2. 早期的 Internet Explorer（啊......是的，这是一种耻辱）和现代浏览器的古代版本将通过读取文件输入框的“值”来公开完整的文件路径，您可以直接生成标签并使用该值。（现在它被一些 c:/fakepath/... 东西取代了。）
  3. 使用 Adob​​e 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);
}
于 2012-11-01T19:04:01.913 回答