上传前显示图像预览

Question

上传前显示图像预览

在我的HTML表单中，我使用类型文件进行输入，例如：

 <input type="file" multiple>

然后单击输入按钮选择多个文件。现在我想在提交表单之前显示选定图像的预览。如何在HTML 5中做到这一点？

Answer 1

HTML 5附带文件API规范，这允许您创建允许用户在本地与文件交互的应用程序；这意味着您可以加载文件并在浏览器中呈现它们，而无需实际上传文件。文件API的一部分是文件阅读器接口，它允许web应用程序异步读取文件的内容。下面是一个使用FileReader类将图像读取为DataURL，并通过设置src图像标记到数据URL的属性：html代码：<input&nbsp;type="file"&nbsp;id="files"&nbsp;/><img&nbsp;id="image"&nbsp;/>JavaScript代码：document.getElementById("files").onchange&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;reader&nbsp;=&nbsp;new&nbsp;FileReader(); &nbsp;&nbsp;&nbsp;&nbsp;reader.onload&nbsp;=&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;get&nbsp;loaded&nbsp;data&nbsp;and&nbsp;render&nbsp;thumbnail. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("image").src&nbsp;=&nbsp;e.target.result; &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;read&nbsp;the&nbsp;image&nbsp;file&nbsp;as&nbsp;a&nbsp;data&nbsp;URL. &nbsp;&nbsp;&nbsp;&nbsp;reader.readAsDataURL(this.files[0]);};这是一篇关于在JavaScript中使用文件API.下面的HTML示例中的代码片段过滤掉用户选择的图像，并将选定的文件呈现为多个缩略图预览：function&nbsp;handleFileSelect(evt)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;files&nbsp;=&nbsp;evt.target.files; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Loop&nbsp;through&nbsp;the&nbsp;FileList&nbsp;and&nbsp;render&nbsp;image&nbsp;files&nbsp;as&nbsp;thumbnails. &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;f;&nbsp;f&nbsp;=&nbsp;files[i];&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Only&nbsp;process&nbsp;image&nbsp;files. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!f.type.match('image.*'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;reader&nbsp;=&nbsp;new&nbsp;FileReader(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Closure&nbsp;to&nbsp;capture&nbsp;the&nbsp;file&nbsp;information. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.onload&nbsp;=&nbsp;(function(theFile)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Render&nbsp;thumbnail. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;span&nbsp;=&nbsp;document.createElement('span'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;span.innerHTML&nbsp;=&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<img&nbsp;style="height:&nbsp;75px;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#000;&nbsp;margin:&nbsp;5px"&nbsp;src="',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.target.result, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'"&nbsp;title="',&nbsp;escape(theFile.name),&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'"/>' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;].join(''); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('list').insertBefore(span,&nbsp;null); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})(f); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Read&nbsp;in&nbsp;the&nbsp;image&nbsp;file&nbsp;as&nbsp;a&nbsp;data&nbsp;URL. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.readAsDataURL(f); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} &nbsp;&nbsp;document.getElementById('files').addEventListener('change',&nbsp;handleFileSelect,&nbsp;false);<input&nbsp;type="file"&nbsp;id="files"&nbsp;multiple&nbsp;/><output&nbsp;id="list"></output>