html5零基础入门教程 html上传文件到服务器( 五 )

DOM URL.createObjectURL() 和 URL.revokeObjectURL() 方法让你可以创建简单的URL字符串，这些字符串可以用来引用任何可以使用DOM文件对象引用的数据，包括用户计算机上的本地文件。
对象URL的简单用法是：
img.src = https://www.520longzhigu.com/diannao/URL.createObjectURL(file);使用此CodePen可以进一步浏览对象URL 。提示：将此方法与前面#5中提到的方法进行比较。
<div><h1>Use Object URL</h1><input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" ><div id="image-grid"></div></div>const fileUploader = document.getElementById('file-uploader');const reader = new FileReader();const imageGrid = document.getElementById('image-grid');fileUploader.addEventListener('change', (event) => {const files = event.target.files;const file = files[0];const img = document.createElement('img');imageGrid.appendChild(img);img.src = https://www.520longzhigu.com/diannao/URL.createObjectURL(file);img.alt = file.name;});结束很多时候，原生HTML功能足以让我们处理手中的用例。我发现，文件上传默认情况下提供了许多不错的选择。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：