javascript - 是否可以在通过表单上传之前预览本地镜像？

Question

更具体地说，我想使用一个带有一个或多个用于图像的文件输入字段的表单。当这些字段发生更改时，我想在将数据发送到服务器之前显示相关图像的预览。

我尝试了许多 javascript 方法，但我总是遇到安全错误。
我不介意使用 java 或 flash，只要解决方案为那些没有它们的用户优雅地降级。 (他们不会得到预览，也不会得到恼人的“安装这个东西”。)

有没有人以一种简单、可重复使用的方式做到这一点？

附言我知道有一个沙箱，但沙箱必须在一个黑暗的、上锁的房间里，所有的 window 都涂黑了吗？

Answer 1

不需要花哨的东西。您只需要createObjectURL函数，它创建一个可用作图像的 URL src ，并且可以直接来自本地文件。

假设您使用文件输入元素 (<input type="file" />) 从用户的计算机中选择了几张图像。以下是为它创建图像文件预览的方法:

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function revokeObjectURL(url) {
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}

function myUploadOnChangeFunction() {
    if(this.files.length) {
        for(var i in this.files) {
            var src = createObjectURL(this.files[i]);
            var image = new Image();
            image.src = src;
            // Do whatever you want with your image, it's just like any other image
            // but it displays directly from the user machine, not the server!
        }
    }
}