input 文件上传 --- 只上传指定文件

最近项目要做一个文件上传功能, 只上传 Excel 表 统计数据,这里只需在form表单中 input 标签中,添加一个属性即可

<%--存放上传文件的表单域,名称可以随便指定--%>
<input type="file" id="uploadfile" name="uploadFile" style="background-color:#FFFF66" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>  

其中 accept 就是所接受的文件类型属性;上传多种类型可以用 逗号 分割

常用类型:
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

转: https://blog.csdn.net/hyd19931002/article/details/78320503

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,el-input并不能直接实现文件上传功能。el-input是一个基本的输入框组件,用于接收用户的输入。如果需要实现文件上传功能,可以使用el-upload组件。下面是一个简单的例子: ```html <template> <el-upload action="your-upload-api" :on-success="handleSuccess" :before-upload="beforeUpload" :file-list="fileList" list-type="picture-card" :auto-upload="false" :multiple="true" :limit="3" :on-exceed="handleExceed" :show-file-list="false" > <i class="el-icon-plus"></i> </el-upload> </template> <script> export default { data() { return { fileList: [] }; }, methods: { handleSuccess(response, file, fileList) { // 上传成功后的回调函数 console.log(response); }, beforeUpload(file) { // 上传前的校验函数 console.log(file); }, handleExceed(files, fileList) { // 上传文件数量超过限制的回调函数 this.$message.warning(`当前限制选择 ${this.limit} 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); } } }; </script> ``` 在上面的代码中,我们使用了el-upload组件来实现文件上传功能。其中,action属性指定上传文件的接口地址,on-success属性指定上传成功后的回调函数,before-upload属性指定上传前的校验函数,file-list属性指定了已上传文件列表,list-type属性指定文件列表的展示方式,auto-upload属性指定了是否自动上传,multiple属性指定了是否支持多文件上传,limit属性指定上传文件数量的限制,on-exceed属性指定上传文件数量超过限制的回调函数,show-file-list属性指定了是否展示已上传文件列表。 需要注意的是,el-upload组件只是一个上传组件,如果需要将上传的图片转成在线链接,需要在后端实现相应的接口。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值