使用JavaScript/jQuery从输入类型“file”中获取二进制图像数据，并与WebMatrix中的AJAX进行图片预览[duplicate]

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.

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

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).

如果有一种更简单的方法使用输入元素显示图片预览,这工作好,背后的想法,当然,我要做的这是显示图片预览之前点击提交表单按钮(或者至少创造幻觉)。

**********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从输入类型“file”中获取图像数据?

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版本中获得图片预览(这是因为获取完整的文件路径被他们视为潜在的安全风险)。我可以问一下我的用户将网站添加到可信站点,但你通常不要求用户篡改这些设置(更不用说最快的方法让你的网站看起来可疑用户是直接要求他们将你的网站添加到可信站点列表。这就像发送电子邮件并询问密码一样。“相信我!我是如此如此的安全!”:)

1 个解决方案

#1

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. 上传原始图片
3. Resize and optimise the image for data storage
4. 调整图像的大小并对其进行优化以实现数据存储
5. Generate a temporary link to that file (usually stored in a server maintained HTTP session)
6. 生成到该文件的临时链接(通常存储在服务器维护的HTTP会话中)
7. Send it back to the user, to enable a 'preview'
8. 发送给用户，以启用“预览”
9. Actually store the image after user confirms the image
10. 实际上，在用户确认图像后存储图像。

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. 大多数现代浏览器都有允许脚本访问本地文件的选项，但通常不会要求用户修改那些低级设置。
3. 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.)
4. 早些时候,Internet Explorer(啊…是的，这是一种耻辱)而现代浏览器的古老版本将通过读取文件输入框的“值”来公开完整的文件路径，您可以直接生成标记并使用该值。(现在换成了c:/fakepath/…的事情。)
5. Use Adobe Flash to mimic the file selection panel, it can properly read local files. But passing it into JavaScript is another topic...
6. 使用adobeflash模拟文件选择面板，可以正确读取本地文件。但是将它传递到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 FileReader before 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);
}