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

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

提问by VoidKing

I have had trouble when researching or otherwise trying to figure out how (if it's even possible) to get binary image data using JavaScript/jQuery from an html input element of type file.

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

I'm using WebMatrix (C#), but it may not be necessary to know that, if the purposes of this question can be answered using JavaScript/jQuery alone.

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

I can take the image, save it in the database (as binary data), then later show the pic on the page, from the binary data, after posting. This does, however, leave me without a pic preview, before uploading, for which I am almost certain I must use AJAX.

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

Again, this may not even be possible, but as long as I can get the binary image data, I believe I can push it to the server with AJAX and process the image the same way I would if I were taking it from a database (note that I don't save the image files themselves using GUID and all that,I just save the binary data).

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

If there is an easier way to show a pic preview using the input element, that would work fine, too, of course, as the whole idea behind me trying to do this is to show a pic preview before they hit the submit form button (or at least create that illusion).

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

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

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

I do not consider this a duplicate of another question because, my real question is:

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

How can I get image data from an input type "file", with JavaScript/jQuery?

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

If I can just get the data (in the right format) back to the server, I should be able to work with it there, and then return it with AJAX (although, I am absolutely no AJAX expert).

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

There is, according to the research that I have done, NO WAY to get picture previews in all IE versions using only javascript (this is because getting the full file path is seen, by them, as a potential security risk). I could ask my users to add the site to the trusted sites, but you don't usually ask users to tamper with those kinds of settings (not to mention the quickest way to make your site seem suspicious to users is to ask them to directly add your site to the trusted sites list. That's like sending an email and asking for a password. "Just trust me! I'm soooo safe!" :)

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

采纳答案by Vicary

Short answer: Use the jQuery form plugin, it suports AJAX-like form submits even for file uploads.

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

tl;dr

tl;博士

Thumbnail preview is popular websites is usually done by a number of steps, basically the website do these steps:

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

1. upload the RAW image
2. Resize and optimise the image for data storage
3. Generate a temporary link to that file (usually stored in a server maintained HTTP session)
4. Send it back to the user, to enable a 'preview'
5. Actually store the image after user confirms the image

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

A few bad solutions are:

一些不好的解决方案是：

1. Most of the modern browsers has options to enable script access to local files, but usually you don't ask your users to tinker with those low level settings.
2. Earlier Internet Explorer (ah... yes it's a shame) and ancient versions of modern browsers will expose the full file path by reading the 'value' of file input box, which you can directly generates an tag and use that value. (Now it is replaced by some c:/fakepath/... thing.)
3. Use Adobe Flash to mimic the file selection panel, it can properly read local files. But passing it into JavaScript is another topic...

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

Hope these helps. ;)

希望这些有帮助。;)

UPDATE

更新

I actually came across a situation that requires a preview before uploading, I'd like to also put it here. As I could recall, there were no transitional versions in modern browsers that do not implement FileReaderbefore masking the real file path, but feel free to correct me if so. This solution should caters most of the browsers, as long as they are supported by jQuery.

我其实遇到过上传前需要预览的情况，我也想放在这里。我记得，现代浏览器中没有过渡版本在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);
}