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

您可以将此属性指定为
<input type="file" id="file-uploader" webkitdirectory />这将允许您选择一个文件夹（又名目录）
用户必须提供确认信息才能上传目录，
用户单击“Upload”按钮后，就会进行上传。这里要注意的重要一点：FileList 数组将以平面结构的形式包含有关上载目录中所有文件的信息。但关键是，对于每个 File 对象，webkitRelativePath 属性都会有目录路径。
例如，让我们考虑一个 main 目录及其下的其他文件夹和文件，
现在，File 对象将将 webkitRelativePath 填充为
您可以使用它在您选择的任何UI结构中呈现文件夹和文件。使用此CodePen进行进一步探索。
CodePen：https://codepen.io/atapas/pen/dyXYRKp
<div><h1>Upload directories</h1><input type="file" id="file-uploader" webkitdirectory /><ul id="pathList"></ul></div>const fileUploader = document.getElementById('file-uploader');const pathList = document.getElementById('pathList');function removeAllChildNodes(parent) {while (parent.firstChild) {parent.removeChild(parent.firstChild);}}fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);removeAllChildNodes(pathList);[...files].forEach((file, index) => {let path = document.createElement('li');path.innerHTML = file.webkitRelativePath;pathList.appendChild(path);});});9.让我们拖放，上传不支持拖放功能进行文件上传是一种古老的方式，不是吗？让我们看看如何通过几个简单的步骤来实现这一目标。
首先，创建一个放置区和一个可选的区域以显示上传的文件内容。我们将使用图像作为文件拖放到此处。
<div id="container"><h1>Drag & Drop an Image</h1><div id="drop-zone">DROP HERE</div><div id="content">Your image to appear here..</div></div>通过它们各自的ID获取拖拽和内容区域。
const dropZone = document.getElementById('drop-zone');const content = document.getElementById('content');添加一个 dragover 事件处理程序，以显示将要复制的内容的效果，
dropZone.addEventListener('dragover', event => {event.stopPropagation();event.preventDefault();event.dataTransfer.dropEffect = 'copy';});接下来，定义放置图像时我们要做什么，我们将需要一个 drop 事件监听器来处理。
dropZone.addEventListener('drop', event => {// 获取文件const files = event.dataTransfer.files;// 现在，我们可以尽一切可能来展示文件内容在一个HTML元素中，如，DIV 。});尝试在下面的CodePen示例中拖放图像文件，并查看其工作原理，不要忘记查看代码以渲染拖放的图像。
CodePen：https://codepen.io/atapas/pen/ExyVoXN
<div id="container"><h1>Drag & Drop an Image</h1><div id="drop-zone"> DROP HERE </div><div id="content">Your image to appear here.. </div></div>const dropZone = document.getElementById('drop-zone');const content = document.getElementById('content');const reader = new FileReader();if (window.FileList && window.File) {dropZone.addEventListener('dragover', event => {event.stopPropagation();event.preventDefault();event.dataTransfer.dropEffect = 'copy';});dropZone.addEventListener('drop', event => {content.innerHTML = '';event.stopPropagation();event.preventDefault();const files = event.dataTransfer.files;console.log(files);reader.readAsDataURL(files[0]);reader.addEventListener('load', (event) => {content.innerHTML = '';const img = document.createElement('img');img.style.height = '400px';img.style.width = '400px';content.appendChild(img);img.src = https://www.520longzhigu.com/diannao/event.target.result;img.alt = file.name;});}); }10.使用objectURLs处理文件有一个称为 URL.createObjectURL() 的特殊方法，可以从文件创建唯一的URL，您也可以使用 URL.revokeObjectURL() 方法释放它。

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

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