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

Question

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

我尝试了一些javascript方法,但我总是遇到安全错误.我不介意使用java或flash,只要解决方案适合那些没有它们的用户.(他们不会得到预览,他们也不会讨厌'安装这个东西'.)

有没有人以简单,可重复使用的方式完成此操作？

PS我知道有一个沙箱,但是沙箱必须在一个黑暗的,锁着的房间里,所有的窗户都被涂黑了吗？

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!
        }
    }
}

Answer 2

这是一个 jQuery + PHP 脚本，用于上传图像并预览它。