Javascript 如何将图像从本地计算机加载到JS对象，避免加载到服务器

我想从计算机直接将图像文件加载到任何js对象，而不使用任何服务器端组件。例如，我想从本地机器上选择一张图片并将其显示在网页上。有没有办法避免文件上传到服务器

---

事实上，我想编写一种多图像加载器，但在加载到服务器之前，我想旋转一些图像，创建一个包含一些数据（如用户id、图像文件名列表）的xml文件，并压缩所有图像和此xml，然后将其发送到服务器。如何在客户端做到这一点？

HTML5有一种方法，但它要求用户将文件放入放置目标或使用

框，否则会造成安全问题

使用

File

API可以读取文件，特别是可以使用

FileReader.readAsDataURL

方法将内容设置为图像标记的

data:

URL

下面是一个例子：

$('#f').on('change', function(ev) {
    var f = ev.target.files[0];
    var fr = new FileReader();

    fr.onload = function(ev2) {
        console.dir(ev2);
        $('#i').attr('src', ev2.target.result);
    };

    fr.readAsDataURL(f);
});​

使用，可以从本地磁盘访问内容

在页面上放置一个传统的

上载字段，并处理

onchange

事件

事件处理程序获取一个包含

文件的
文件列表
。从那里，您可以调用以获取图像的内容，然后将该数据URL传递给
或
进行旋转。
您可以使用window.URL对象的方法，但这没有太多的浏览器支持

仅适用于chrome和firefox
的可能副本-似乎这是不可能的…跨源规则是如何关联的？@Christian，因为如果您从
http://
加载页面，它们会限制对
文件的访问：//
。我看不出它是如何关联的，因为他没有尝试访问其他页面或类似的内容那个虽然存在访问服务器的跨源策略，但您始终可以将内容放入表单并动态发布。@Christian这就是我试图阐述的关于用户交互的观点。您可以让用户将内容放入表单中，并使用HTML5
File
让浏览器处理它。好吧，如果用户没有自己选择文件，就不能启动代码读取文件。这与跨源策略无关，完全是另外一回事。