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

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

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

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

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

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

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

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

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

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

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

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

尝试查看答案[这里] [1]。 [1]：stackoverflow.com/questions/4459379/

@PavelAnossov我唯一遗憾的是你的答案是你没有把它放在真正的答案表格中，而且我无法投票说出答案8000次！ 为什么这种解决方案在互联网上不再普及？ 完美地工作！ 比我试图做的更容易！ 如果你发表答案，我很乐意接受！

我确实把它作为答案，它被转换成评论作为一个简单的答案。

@PavelAnossov好吧，那很臭......哈哈

@PavelAnossov是否有一个版本在IE中工作而不必使用AJAX或服务器端？

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

TL;博士

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

上传RAW图像

调整大小并优化图像以进行数据存储

生成到该文件的临时链接(通常存储在服务器维护的HTTP会话中)

将其发回给用户，以启用"预览"

实际上在用户确认图像后存储图像

一些不好的解决方案是：

大多数现代浏览器都有选项来启用对本地文件的脚本访问，但通常您不会要求用户修改这些低级别设置。

早期的Internet Explorer(啊...是的，这是一种耻辱)和现代浏览器的古老版本将通过读取文件输入框的"值"来公开完整的文件路径，您可以直接生成标记并使用该值。 (现在用一些c：/ fakepath / ......替换它。)

使用Adobe Flash模仿文件选择面板，它可以正确读取本地文件。但将其传递给JavaScript是另一个话题......

希望这些有帮助。 ;)

UPDATE

我实际上遇到过需要在上传之前进行预览的情况，我还想把它放在这里。我记得，现代浏览器中没有过渡版本在屏蔽真实文件路径之前没有实现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而不是你应该没有特权......

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