input标签上传文件(一篇搞定)

input type="file"美化
之所以会谈到input type="file"美化是因为默认的样式实在难以恭维，用过的人都知道，下面对其进行美化。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.file {position: relative;display: inline-block;background: #133d63;border: 0.1rem solid #99d3f5;border-radius: 0.2rem;padding: 0.2rem 0.6rem;overflow: hidden;color: #f0faff;text-decoration: none;text-indent: 0;line-height: 1.5rem;font-size: 0.8rem;margin-left: 7rem;}.file input {position: absolute;font-size: 0.8rem;right: 0;top: 0;opacity: 0;cursor: pointer;}.file:hover {background: #aadffd;border-color: #78c3f3;color: #004974;text-decoration: none;}</style></head><body><div class="file">上传文件<input type="file" name="image" accept="image/*" onchange="upload()"></div><script type="text/javascript">function upload(event) {var e=window.event||event;console.log(e)// 获取当前选中的文件var File = e.target.files[0];console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了}</script></body>
</html>

上传功能分析

//change是当你选中文件，然后点击打开后触发的，这个时候就会触发上传功能<script type="text/javascript">function upload(event) {var e=window.event||event;console.log(e)// 获取当前选中的文件var File = e.target.files[0];console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了}</script>

console.log(File)的打印结果：

accept=“image/*” 做类型限制，这样在选择文件的时候就只能选择文件类型的图片
还有以下的上传文件类型规定

<input type="file" accept=".doc,.docx,.pdf,.txt,.htm,.html" />

但是上面的限制还是不能阻止一些恶意用户，就算选择类型是图片其实还是可以选择少部分的其他格式例如：.zip
在发送请求之前还需要进行文件类型验证，彻底堵住后台的嘴

//发送数据之前
if(['jpeg', 'png', 'gif', 'jpg'].indexOf(File.type.split("/")[1]) < 0) {//用你选择组件的报错弹窗就行，报出以下提醒alert("上传的文件必须是图片格式");return;
}

当我们要上传所有类型的的文件的时候通过File.type似乎是有点问题，那么这里提供一个稳妥的办法，通过File.name来进行判断

/ 限制文件类型  lastIndexOf倒着查找，substr截取（前闭后开）
var fileType = File.name.substr(File.name.lastIndexOf(".")+1);
if (['doc', 'docx', 'pdf', 'txt', 'htm', 'html'].indexOf(fileType) < 0) {alert("只支持.doc .docx  .pdf  .txt  .htm .html格式文件");return;}

上传大小限制
上传文件的大小也限制一下，前端做限制很简单，利用之前File打印结果中的size字段，这里API给我们返回的是所选文件的字节数，1KB=1024字节，1MB=1024KB。利用以上，我们加个判断。这里size的单位是字节

var imgMaxSize = 1024 * 1024 * 4; // 4MB图片的字节数
if(File.size>imgMaxSize){alert("您可上传文件的最大限制为4MB");return;
}

特殊情况（参考他人）
如果你用的是jquery.ajax,并且你上传的是文档文件，可能ajax会对你的文件进行预处理，然后你就可能遇到如下错误：
Illegal invocation这时候我们在ajax里面配置一下选项processData:false, 关掉jquery的预处理就行了，一般这种问题多发生在文档文件上

$.ajax({type:'POST',url:url,data:formData,contentType:undefined,processData:false,            success:function(data){}});

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.file {position: relative;display: inline-block;background: #133d63;border: 0.1rem solid #99d3f5;border-radius: 0.2rem;padding: 0.2rem 0.6rem;overflow: hidden;color: #f0faff;text-decoration: none;text-indent: 0;line-height: 1.5rem;font-size: 0.8rem;margin-left: 7rem;}.file input {position: absolute;font-size: 0.8rem;right: 0;top: 0;opacity: 0;cursor: pointer;}.file:hover {background: #aadffd;border-color: #78c3f3;color: #004974;text-decoration: none;}</style></head><body><div class="file">上传文件<input type="file" name="image" accept="image/*" onchange="upload()"></div><script type="text/javascript">function upload(event) {var e=window.event||event;console.log(e)// 获取当前选中的文件var File = e.target.files[0];console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了var data=new FormData();data.append("file",File)let refreshToken = localStorage.getItem("token");axios.post("http://202.101.162.69:8089/proxy/top/api/upload/oss",data,{headers: {Authorization: refreshToken,},}).then((res) => {if (res.data.code == 200) {this.$message({message: "上传文件成功",type: "success",center: "true",duration: 500,customClass: "press",});} else {this.$message({message: "上传文件失败",type: "warning",center: "true",duration: 500,customClass: "press",});}}</script></body>
</html>

input标签上传文件(一篇搞定)相关推荐

实现php a标签文件,HTML_如何点击a标签实现弹出input file上传文件对话框，html 复制代码代码如下: SPAN - phpStudy...
如何点击a标签实现弹出input file上传文件对话框 html 复制代码代码如下: <div> <a href="###">添加图片a> < ...
Input file 上传文件
Input file 上传文件介绍 <input> type 类型为 file 的 input 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascr ...
使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
php input file 上传文件类型,php轻松实现文件上传功能
本文分为五个部分针对php上传文件进行分析讲解,具体内容如下文件上传变量将服务器上的临时文件移动到指定目录下 php.ini上传相关配置 error错误号单文件上传实例 1.文件上传变量 //$ ...
php文件上传限制后缀,input file上传文件扩展名限制
方法一(不推荐使用):用jS获获取扩展名进行验证: function change(e){ var src=e.target || window.event.srcElement; //获取事件源,兼 ...
selenium autoit java_selenium借助AutoIt识别上传文件Java篇
从网站上下载AutoIt并安装,安装完成在菜单中会看到图4.13的目录: 图4.13 AutoIt菜单 1.首先打开AutoIt Windows Info 工具,鼠标点击Finder Tool,鼠标 ...
android wcf 上传文件,第二篇 ( wcf 与 android 图片上传下载）
老规矩废话不多说,直接入主题注:wcf 使用rest风格,传递json数据,图片是经过base64编码,android 使用common-codec-1.5.jar 进行base64编码服务器端 ...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现由于需要使用树形插件zTree,这个插件是依赖于jque ...
获取当前按钮所在行的input_form表单的input上传文件
在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码.行吧,既然用到了那就硬着头皮上咯. 使用首先文件的上传需要一个type=file的input.它的意义就是上 ...

input标签上传文件(一篇搞定)

input标签上传文件(一篇搞定)相关推荐

最新文章

热门文章