龙岗建站费用,手机免费建立网站吗,将wordpress网站变成app,wordpress零基础随着Web应用的普及#xff0c;文件上传功能成为许多网站和应用不可或缺的一部分。本文整理了个人学习过程中的笔记#xff0c;为开发者提供全面的了解和实践经验。
单文件上传
在早期的html应用中#xff0c;都是使用form标签中嵌套来实现文件上传的#xff0c;具体代码如…随着Web应用的普及文件上传功能成为许多网站和应用不可或缺的一部分。本文整理了个人学习过程中的笔记为开发者提供全面的了解和实践经验。
单文件上传
在早期的html应用中都是使用form标签中嵌套来实现文件上传的具体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title单文件上传示例/title
/head
bodyform action/upload methodpost enctypemultipart/form-datalabel forfileInput选择文件/labelinput typefile idfileInput namefileInputbutton typesubmit上传文件/button/form
/body
/html上述实现方式是最原始也是最简单的代码实现详细的元素说明如下
form 元素包含了文件上传的整个表单action 属性指定了处理文件上传的服务器端脚本method 属性指定了表单提交的HTTP方法为 postenctype 属性设置为 multipart/form-data 以支持文件上传。label 元素用于显示文本标签上述示例中label跟元素联动提升用户体验。input typefile 是文件上传的核心元素它创建了一个文件选择框。id 属性用于关联 label 元素name 属性用于标识在提交表单时的字段名。button 元素用于提交表单。
这只是一个基本的HTML结构实际上要使文件上传功能更加完善还需要使用后端技术来处理文件的接收和存储。涉及后端的代码逻辑就不在这里陈述了。后续会专门编写后端接收文件上传的相关文章。
另外单文件上传还可以结合JavaScript语言来实现以下是一个简单的例子演示如何使用JavaScript结合HTML实现文件上传并通过Ajax发送文件到服务器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJavaScript文件上传示例/title
/head
bodyinput typefile idfileInput /button onclickuploadFile()上传文件/buttonprogress idprogressBar value0 max100/progressdiv idstatus/divscriptfunction uploadFile() {var fileInput document.getElementById(fileInput);var progressBar document.getElementById(progressBar);var status document.getElementById(status);var file fileInput.files[0];if (!file) {status.innerHTML 请选择文件;return;}var formData new FormData();formData.append(file, file);var xhr new XMLHttpRequest();xhr.open(POST, /upload, true);xhr.upload.onprogress function (e) {if (e.lengthComputable) {var percent (e.loaded / e.total) * 100;progressBar.value percent;status.innerHTML percent.toFixed(2) % 上传中...;}};xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {status.innerHTML 上传完成;} else if (xhr.readyState 4 xhr.status ! 200) {status.innerHTML 上传失败;}};xhr.send(formData);}/script
/body
/html本人这里也提供一个基于Vue3的文件上传实现代码如下
templateel-dialogclassupload-file-dialogtitle文件上传width600pxheight300pxel-row classfile-infoel-col :span12 classfile-info-namespan classtitle当前文件夹/spanspan classcontent{{folderObj.filename}}/span/el-colel-col :span12 classfile-info-update-timespan classtitle最后更新时间/spanspan classcontent{{folderObj.updateTime}}/span/el-col/el-rowel-rowel-colel-upload:auto-uploadfalseclassupload-demodragaction#multiple:on-changeuploadContext.handleChangev-model:file-listformData.fileListel-icon classel-icon--uploadupload-filled //el-icondiv classel-upload__text拖动文件到这里或者em点击上传/em/divtemplate #tipdiv classel-upload__tip文件大小不超过10MB/div/template/el-upload/el-col/el-rowel-row classbtnsel-colel-button typeprimary clickuploadContext.upload开始上传/el-button/el-col/el-row/el-dialog
/templatescript setup
import { onMounted, reactive, getCurrentInstance } from vue
import axios from axios
const props defineProps([folderObj])
const that getCurrentInstance()
const ctx that.ctx //当前实例的上下文
const formData reactive({fileList: [],imgSrc:
})const uploadContext {upload: (){formData.fileList.forEach((item, index){let formData new FormData()formData.append(fileId, item.uid)formData.append(filename, item.name)formData.append(file, item.raw)formData.append(fileSize, item.size)formData.append(fileSizeDesc, item.size )formData.append(fileSuffix, item.name.substring(item.name.lastIndexOf(.)1))formData.append(identifier, item.raw.type)axios.post(/pan/file/upload, formData).then(res{console.log(res) //显示上传文件结果})})},/*** 文件上传控件变化处理这里可以增加进度条的显示处理逻辑本人这里就处理这块代码逻辑了*/handleChange: (uploadFile, uploadFileList){console.log(formData.fileList)}
}/scriptstyle langscss
.upload-file-dialog {.el-dialog__body{padding: 10px 15px;}.file-info{padding: 0 0 5px 0;.file-info-update-time{text-align: right;}}.btns{.el-col{text-align: right;}}
}
/style
