input[type=file]上传图片及转为base64码以及预览
2024-09-04 05:01:15
<input type="file" id="imgurl" capture="camera" accept="image/png,image/gif,image/jpeg"/>
在移动端上传可以像上面那样设置,如果不行的话可以将后面的accept属性改成accept="image/*";
accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
如果不限制图像的格式,可以写为:accept="image/*"。
如果想在上传完文件执行需求,input[type=file]用click事件是不行的,要用change事件,这样就可以在上传完文件后干你爱干的事。
input[type=file]的样式如果设置不了,或者嫌设置太麻烦的话,可以直接将它的opacity设置为0,然后覆盖在触发的按钮上就行。
还有如果不传base64,而是直接用form上传文件的话,一定要设置这个属性:enctype="multipart/form-data"
转base64码(其实就是图片的url,只不过是换了种方式来表示)
$('input[type=file]').on{'change',function(){
var reader=new FileReader();
reader.onload=function(e){
console.log( reader.result); //或者 e.target.result都是一样的,都是base64码
}
reader.readAsDataURL(this.files[0])
//filses就是input[type=file]文件列表,files[0]就是第一个文件,这里就是将选择的第一个图片文件转化为base64的码
}
预览,这个最简单,直接将上面得到的reader.result赋值给一个img标签就可显示,后台传的图片数据也直接把reader.result储存起来发过去就可以。
其实后台的需求是要我用canvas来上传,用canvas既能压缩图片,又能限制大小,又能限制尺寸,也能转base64码。可惜由于我能力不足,加上时间有点赶,于是就先用着这种老点的方法,不过技术是与时俱进的,不能仅仅是做出来就行,要赶上技术的变化才行,下次一定要学会用canvas来上传图片才行。
最新文章
- javascript基础04
- web api 初体验 解决js调用跨域问题
- 2015Web前端攻城之路
- LINUX下的MYSQL默认表名区分大小写
- T-SQL 数据库笔试题
- IE8 innerHTML赋值时包含多级HTML标签时的解决方案
- Python中classmethod与staticmethod区别
- Perl中级第四章课后习题
- vim温馨提示
- 用js 获取url 参数 页面跳转 ? 后的参数
- a标签锚点平滑跳转
- Hadoop双namenode配置搭建(HA)
- pandas.DataFrame 插入列和行
- redis序列化异常------------org.springframework.data.redis.serializer.SerializationException
- 开源项目CircleImageView
- Android中measure过程、WRAP_CONTENT详解以及 xml布局文件解析流程浅析
- ocilib初体验
- 配置Sharepoint之后。外网无法访问的问题
- ASP.NET Core Startup类 Configure()方法 | ASP.NET Core 中间件详细说明
- 题解 P1765 【手机_NOI导刊2010普及(10)】
热门文章
- C++开发系列-内联函数
- Error:Execution failed for task &#39;:app:validateSigningDebug&#39;.
- mybatis结果封装到hashmap中没有null的数据
- 莫烦pytorch学习笔记(七)——Optimizer优化器
- 菜鸟安装 CocoaPods
- date函数
- 深入浅出Mybatis系列(一)---Mybatis入门[转]
- 报错C1189 #error: "No Target Architecture"
- 不小心使用vcpkg之后再使用conan,一直报链接错误
- mybatis配合pagehelper分页助手查询