有没有一种方法可以让用户在上传到服务器之前查看他们将要上传客户端的图像?

新的可能 FileReader 接口在HTML5中定义,目前在Firefox上工作。

文件输入具有关联的 files 属性,跟踪当前为该输入选择的文件列表。若要显示此列表中的文件,请新建一个 字符流 对象,初始化其 onload 事件处理程序,并将文件作为数据URL读取。

// get the first file, foo is a file input field
var file = document.getElementById('foo').files[0];

// setup the reader and the load complete callback
var reader = new FileReader();
reader.onload = function(e) {
    var image = new Image();
    // string representing the image
    image.src = e.target.result;
    document.body.appendChild(image);
};

// read the file as a data url
reader.readAsDataURL(file);

加载文件后,您将可以访问数据URL方案中的内容,例如:

data:image/jpeg;base64,...aqHI7sNyPGFjdtQvFr/2Q==

创建新图像并设置其 src 此数据字符串的属性。

See a working example here . 仅火狐浏览器 .

由于存在安全限制,您不能单独在javascript中跨浏览器执行此操作,尽管有一些Flash版本可用, here's one example (免费版做你想要的)。

可能还有更多的免费闪存版本。

这是以前讨论过的- is it possible to preview local images before uploading them via a form?

由于HTML5,这些功能是可能的,这要归功于 File Object , File Reader 以及输入元素的files属性。

有关详细信息,请参阅此处: http://demos.hacks.mozilla.org/openweb/ 和; http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/ .

示例(仅用于演示,需要FF 3.5+): 请参见这里: http://gist.github.com/536024

如果您想知道,file.url是全新的,使用它,您不再需要将整个文件读取到内存中,并将整个data url(data:image/src,base64;df15edfe86..)分配给src属性。

嗯, <img> 标记需要指向图像的路径。该路径可以指向Web上的某个对象,也可以指向本地文件。到目前为止,一切都很好。诀窍是,如何告诉您的javascript本地系统上的路径,以便它可以设置img-src属性。

文件的路径 <input> 标记对于javascript是不可用的(作为安全预防措施---您不想让一个想要的页面从您的系统背后上传文件)。

另一方面,如果可以让用户在文本中输入正确的文件路径名 <输入& GT; 字段,那么它应该是可能的。