html如何引用输入标记中的文件

假设我有一个带有<input type="file">标记的简单表单，我想要做的是，一旦用户选择了一个文件，我想显示该文件（它是一个img）在同一页面上查看。更好的用户体验。html如何引用输入标记中的文件

试图设置基于onChange事件的值，然后意识到这是行不通的。

有什么想法？

来源

2011-05-12 boots

如何删除一些代码？ – 2011-05-12 05:41:15

您无法从浏览器沙箱访问客户端的文件系统。它违背了浏览器的安全模型。您只需等待用户上传文件，然后才能显示它。

来源

2011-05-12 05:42:06 Asaph

查看我的帖子中许多网站使用的解决方案。 – 2011-05-12 06:33:00

这是一个巧妙的技巧，但基本上是我说的一个变化，即文件必须先上传到服务器才能显示在页面上。你能举出一个使用这种技术的网站的例子吗？ – Asaph 2011-05-12 06:36:50

请参阅Gmail中的联系人示例。当您选择图像时，它会立即显示。你可以找到很多其他的例子。抱歉现在不能记得任何其他。 – 2011-05-12 06:40:40

要做到这一点的唯一方法是捕捉onChange事件并使用Ajax（异步）上传文件。

提示：在onChange事件上提交表单并将发布数据发送到服务器端脚本。

这项技术被很多网站使用，虽然如果客户端连接速度慢，文件很大，会很慢。祝你好运！

来源

2011-05-12 06:32:01

您不需要需要上传图像，然后才能显示它。这里有一个JQuery代码片段：

$('input:file').change(function(){ 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = (function(event) { 
    $('#previewImage').attr('src',event.target.result); 
    }); 
    reader.readAsDataURL(file); 
});

来源

2011-09-19 00:18:16 RAMilewski

html如何引用输入标记中的文件

回答

相关问题