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

// 文件上传change事件的侦听器fileUploader.addEventListener('change', (event) => {// 读取文件大小const file = event.target.files[0];const size = file.size;let msg = ''; // 检查文件大小是否大于1MB，并准备一条消息。if (size > 1024 * 1024) {msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;} else {msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;}// 向用户显示消息feedback.innerHTML = msg;});尝试上传不同大小的文件，以查看验证的工作原理
CodePen：https://codepen.io/atapas/pen/pobjMKv
<div><h1>检查文件大小</h1><input type="file" id="file-uploader"><div id="feedback"></div</div>const fileUploader = document.getElementById('file-uploader');const feedback = document.getElementById('feedback');fileUploader.addEventListener('change', (event) => {const file = event.target.files[0];console.log('file', file);const size = file.size;console.log('size', size);let msg = '';if (size > 1024 * 1024) {msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;} else {msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;}feedback.innerHTML = msg;});function returnFileSize(number) {if(number < 1024) {return number + 'bytes';} else if(number >= 1024 && number < 1048576) {return (number/1024).toFixed(2) + 'KB';} else if(number >= 1048576) {return (number/1048576).toFixed(2) + 'MB';}}7.显示文件上传进度更好的可用性是让你的用户知道文件上传的进程。现在，我们知道了 FileReader 和读取和加载文件的事件。
const reader = new FileReader();FileReader 有另一个事件，称为进度(progress)，知道已加载了多少。我们可以使用HTML5的 progress 标签来创建带有此信息的进度栏。
reader.addEventListener('progress', (event) => {if (event.loaded && event.total) {// 计算完成百分比const percent = (event.loaded / event.total) * 100;// 将值设置为进度组件progress.value = https://www.520longzhigu.com/diannao/percent;}});不如你试着上传一个大一点的文件，看看下面的CodePen中的进度条工作情况如何？试试吧。
CodePen：https://codepen.io/atapas/pen/eYzpwYj
<div><h1>File upload progress</h1><input type="file" id="file-uploader"><div id="feedback"></div><label id="progress-label" for="progress"></label><progress id="progress" value="https://www.520longzhigu.com/diannao/0" max="100"> </progress></div>const fileUploader = document.getElementById('file-uploader');const feedback = document.getElementById('feedback');const progress = document.getElementById('progress');const reader = new FileReader();fileUploader.addEventListener('change', (event) => {const files = event.target.files;const file = files[0];reader.readAsDataURL(file);reader.addEventListener('progress', (event) => {if (event.loaded && event.total) {const percent = (event.loaded / event.total) * 100;progress.value = https://www.520longzhigu.com/diannao/percent;document.getElementById('progress-label').innerHTML = Math.round(percent) + '%';if (percent === 100) {let msg = `<span style="color:green;">File <u><b>${file.name}</b></u> has been uploaded successfully.</span>`;feedback.innerHTML = msg;}}});});8.目录上传呢？我们可以上传整个目录吗？好吧，这是可能的，但有一些限制。有一个叫做 webkitdirectory 的非标准属性（至少在写这篇文章的时候是这样），允许我们上传整个目录。
虽然最初只针对基于WebKit的浏览器实现，但webkitdirectory也可以在Microsoft Edge以及Firefox 50和更高版本中使用。但是，即使它具有相对广泛的支持，它仍然不是标准的，除非您别无选择，否则不应该使用它。

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

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