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

Question

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

实际上我想写一种多图像加载器,但在加载到服务器之前我想要旋转一些图像,用一些数据创建一个xml文件,比如用户id,图像文件名列表以及压缩所有图像和这个xml然后将其发送到服务器.我怎样才能在客户端做到这一点？

Answer 1

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/