html如何在输入标签中引用该文件

Question

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

尝试根据onChange事件设置值，然后意识到这不起作用。

有什么想法吗？

Answer 1

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

Answer 2

执行此操作的唯一方法是捕获onChange事件并使用Ajax（异步）上载文件。

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

许多网站都使用这种技术，但如果客户端连接速度慢且文件很大，则会很慢。祝你好运！

Answer 3

您不需要上传图片才能显示。这是一个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);   
});