<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码以及预览的更多相关文章

  1. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  2. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  3. 一、H5(移动端)前端使用input type=file 上传图片,调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  4. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  6. 关于input type=file上传图片的总结

    最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...

  7. type="file"实现兼容IE8本地选择图片预览

    一.HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Uploa ...

  8. input type = file 上传图片转为base64

    项目背景是做图片识别,接口需要上传图片格式为base64格式的,react项目的相关代码: let reader = new FileReader();reader.readAsDataURL(e.t ...

  9. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

随机推荐

  1. h5对接jssdk支付分并调用开启支付分页面

    1.ws.config签名   调用ticket等获取ws.config的签名,下面会调用方法再调用方法时需要再次按照调用方法的签名 wx.config({ debug: true, // 开启调试模 ...

  2. 关于spring java.lang.IllegalArgumentException: Name for argument type [java.lang.String] 的错误

    况描述: web工程在windows环境eclipse下编译部署没有问题,系统升级时需要运维从Git取相应的源码并编译部署到线上机器,部署启动正常没有错误,当访问业务的action时报错,如下. 错误 ...

  3. gnome3 修改桌面背景图片模式

    修改背景图片,可以在 桌面右键 选择"修改壁纸",选择"background"(背景),这里没有设定背景图片模式. 可以在 “应用程序”->"工 ...

  4. leetcode-买卖股票最佳时机含冷冻期

    题目描述: 方法一: class Solution: def maxProfit(self, prices: List[int]) -> int: n = len(prices) dp_i_0 ...

  5. 移动端自定义键盘的vue组件 ----keyboard

    <style scoped lang="less"> .keyboard { /* height: 250px; */ width: 100%; position: f ...

  6. 5行代码怎么实现Hadoop的WordCount?

    初学编程的人,都知道hello world的含义,当你第一次从控制台里打印出了hello world,就意味着,你已经开始步入了编程的大千世界,这和第一个吃螃蟹的人的意义有点类似,虽然这样比喻并不恰当 ...

  7. elasticsearch 过滤器的种类

    elasticsearch之查询过滤 elasticsearch elastic-search xixicat 2月13日发布 推荐 1 推荐 收藏 2 收藏,289 浏览 序 本文主要记录es的查询 ...

  8. 2018-12-18-WPF-一个空的-WPF-程序有多少个窗口

    title author date CreateTime categories WPF 一个空的 WPF 程序有多少个窗口 lindexi 2018-12-18 21:16:40 +0800 2018 ...

  9. 二分判定 覆盖问题 BZOJ 1052

    //二分判定 覆盖问题 BZOJ 1052 // 首先确定一个最小矩阵包围所有点,则最优正方形的一个角一定与矩形一个角重合. // 然后枚举每个角,再解决子问题 #include <bits/s ...

  10. walle(瓦力)部署系统的安装和简单使用

    Walle(瓦力):一套软件开发的部署系统.提供了清晰的日志记录,支持数据的回滚.用于解决大型团队在软件开发中的测试.预测试和上线的统一部署管理. 系统环境:CentOS6.8-A CentOS-6. ...