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

// 通过id获取文件上传者const fileUploader = document.getElementById('file-uploader');// 监听 change 事件并读取元数据fileUploader.addEventListener('change', (event) => {// 获取FileList数组const files = event.target.files;// 循环浏览文件并获取元数据for (const file of files) {const name = file.name;const type = file.type ? file.type: 'NA';const size = file.size;const lastModified = file.lastModified;console.log({ file, name, type, size, lastModified });}});这是单个文件上传的输出：
使用此CodePen进行进一步探索
CodePen：https://codepen.io/atapas/pen/gOMaRJv
<div><h1>Read File Metadata</h1><input type="file" id="file-uploader"><p id="feedback"></p></div>const fileUploader = document.getElementById('file-uploader');fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);for (const file of files) {const name = file.name;const type = file.type ? file.type : 'NA';const size = file.size;const lastModified = file.lastModified;console.log({file, name, type, size, lastModified});const feedback = document.getElementById('feedback');const msg = ` File Name: ${name} <br/>File Size: ${size} <br/>File type: ${type} <br/>File Last Modified: ${new Date(lastModified)}`;feedback.innerHTML = msg;}});4.了解文件 accept属性我们可以使用 accept 属性来限制要上传的文件的类型，您可能希望在用户上传个人资料图片时，只显示允许浏览png格式图片类型。
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>在上面的代码中，文件浏览器将只允许扩展名为 jpg 和 png 的文件。
请注意，在这种情况下，文件浏览器会自动将文件选择类型设置为自定义而不是全部。但是，如果需要，您始终可以将其更改回所有文件。
使用此CodePen探索 accept 属性
CodePen：https://codepen.io/atapas/pen/OJXymRP
<div><h1>只能选择.png和.jpg文件</h1><input type="file" id="file-uploader" accept=".jpg, .png" multiple><p>Upload files and see the output in browser console</p></div>const fileUploader = document.getElementById('file-uploader');fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);});5.管理文件内容您可以在成功上传文件后显示文件内容。对于个人资料图片，如果上传后不立即向用户展示上传的图片，会造成混乱。
我们可以使用 FileReader 对象将文件转换为二进制字符串。然后添加 load 事件侦听器，以在成功上传文件时获取二进制字符串。
// 获取FileReader的实例const reader = new FileReader();fileUploader.addEventListener('change', (event) => {const files = event.target.files;const file = files[0];// 上传后获取文件对象并读取// 数据作为URL二进制字符串reader.readAsDataURL(file);// 加载后，对字符串进行处理reader.addEventListener('load', (event) => {// 在这里我们创建一个图像标签并添加图片const img = document.createElement('img');imageGrid.appendChild(img);img.src = https://www.520longzhigu.com/diannao/event.target.result;img.alt = file.name;});});尝试在下面的CodePen中选择一个图像文件，然后查看其渲染。
CodePen：https://codepen.io/atapas/pen/zYBvdjZ
<div><h1>显示文件内容</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];reader.readAsDataURL(file);reader.addEventListener('load', (event) => {const img = document.createElement('img');imageGrid.appendChild(img);img.src = https://www.520longzhigu.com/diannao/event.target.result;img.alt = file.name;});});6.验证文件大小如我们所见，我们可以读取文件的大小元数据，实际上可以将其用于文件大小验证，您可能允许用户上传最大1MB的图像文件。让我们看看如何实现这一目标。

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

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