input[type=file]上传图片及转为base64码以及预览
<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来上传图片才行。
input[type=file]上传图片及转为base64码以及预览的更多相关文章
- input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- 一、H5(移动端)前端使用input type=file 上传图片,调用相机和相册
一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册
- input[type="file"]上传图片并显示图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...
- 关于input type=file上传图片的总结
最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...
- type="file"实现兼容IE8本地选择图片预览
一.HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Uploa ...
- input type = file 上传图片转为base64
项目背景是做图片识别,接口需要上传图片格式为base64格式的,react项目的相关代码: let reader = new FileReader();reader.readAsDataURL(e.t ...
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
随机推荐
- table方法也属于模型类的连贯操作方法之一
table方法也属于模型类的连贯操作方法之一,主要用于指定操作的数据表. 用法 一般情况下,操作模型的时候系统能够自动识别当前对应的数据表,所以,使用table方法的情况通常是为了: 切换操作的数据表 ...
- IDEA Error:java: Compilation failed: internal java compiler error 解决方案
这是由于版本不一致导致的 file => settings => 搜索找到Java Compiler 把相应jdk版本改成1.8 ctrl+alt+s
- ROC曲线及AUC
ROC曲线 意义 ROC曲线指受试者工作特征曲线 / 接收器操作特性曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,是用 ...
- CMS 源码解读
CMS 是”Content Management System” 的缩写,意为” 内容管理系统”. 内容管理系统是企业信息化建设和电子政务的新宠,也是一个相对较新的市场.对于内容管理,业界还没有一个统 ...
- Python学习day13-函数进阶(1)
Python学习day13-函数进阶(1) 闭包函数 闭包函数,从名字理解,闭即是关闭,也就是说把一个函数整个包起来.正规点说就是指函数内部的函数对外部作用域而非全局作用域的引用. 为函数传参的方式有 ...
- STL与泛型编程-练习2-GeekBand
练习题目: struct Programmer{ Programmer(const int id, const std::wstring name): Id(id), Name(name){ } vo ...
- JS倒计时两种种实现方式 很不错
最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...
- 目标检测从入门到精通—SPP-Net详细解析(三)
SPP-Net网络结构分析 Author:Mr. Sun Date:2019.03.18 Loacation: DaLian university of technology 论文名称:<Spa ...
- AlexNet结构图详解
- Hadoop构架概览
hadoop是一个开源的软件框架,是一个利用商业硬件处理和存储大型数据的软件.从下到上主要有五个主要的组成部分: 集群,是一套主机(节点)组成的.节点可以以机架划分.这个是硬件级别的构架. YARN构 ...