8

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

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

4

3 回答 3

16

HTML5 有一种方法，但它要求用户将文件拖放到放置目标或使用<input type="file"/>框，否则会出现安全问题。

使用FileAPI，您可以读取文件，具体而言，您可以使用该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);
});​

http://jsfiddle.net/alnitak/Qszjg/

于 2012-07-22T20:18:43.407 回答
2

使用新的文件 API，可以从本地磁盘访问内容。

您在页面上放置一个传统的<input type="file">上传字段，并处理该onchange事件。

MDN 有一篇很好的文章，包含了所有的细节。

您的事件处理程序获得一个FileList包含Files. 从那里，您可以调用FileReader.readAsDataURL(File)以获取图像的内容，然后将该数据 URL 传递给 an<img>或 a<canvas>以进行旋转。

于 2012-07-22T20:24:17.913 回答
2

您可以使用window.URL 对象的createObjectURL方法，虽然这没有太多浏览器支持

http://jsfiddle.net/LvAqp/仅适用于 chrome 和 firefox

于 2012-07-22T20:30:14.477 回答