<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> </form>

可以接受 GIF 和 JPEG 两种图像

如果不限制图像的格式,可以写为:accept="image/*"。

上传图片大小限制

<input type="file" id="tp" name="tp" onchange="upload(this)" accept="image/*"/>

//限制图片宽高:418 * 282

function upload(){

var myimg = URL.createObjectURL(document.getElementById('tp').files[0]);

var img = new Image();

img.src = myimg;

img.onload = function(){

if(img.width > 425 || img.height > 295){

alert("只能上传小于418x282的图片!");

$(".remove").click();

}

};

};

type=file 上传图片限制 类型和尺寸 方法的更多相关文章

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

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

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

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

  3. input[type=file]上传图片及转为base64码以及预览

    <input type="file" id="imgurl" capture="camera" accept="image/ ...

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

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

  5. input type="file"指定文件类型为excel

    指定上传类型为excel:加上accept="application/vnd.ms-excel"即可,只兼容chrome跟ff,不兼容ie <input type=" ...

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

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

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

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

  8. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

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

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

随机推荐

  1. 如何在组件中监听vuex数据变化(当vuex中state变化时,子组件需要进行更新,怎么做?)

    todo https://blog.csdn.net/qq_37899792/article/details/97640434

  2. ...扩展运算符+rest参数+call/apply/bind

    之前在set,map里面有提过扩展运算符的概念,但是今天偶然遇到一个问题,类似于扩展运算符的经典用法,突然发现对其了解不是很深,所以再来整理一下扩展运算符的相关知识. 重点:扩展运算符内部调用的是数据 ...

  3. 多个swiper使用样式出了问题

    observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper 不行直接设  w ...

  4. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  5. CentOS mysql安装

    MySQL For Excel 1.3.5MySQL for Visual Studio 1.2.5MySQL Fabric 1.5.6 & MySQL Utilities 1.5.6Conn ...

  6. 关于img标签浏览器自带的边框,清除边框的解决方式(即img[src=""] img无路径情况下,灰色边框去除解决方法)

    详解img[src=""] img无路径情况下,灰色边框去除解决方法 1.Js解决办法 <html> <head> <meta charset=&qu ...

  7. goland搭建beego开发环境

    1.安装最新的go软件 ,当前版本1.122.下载goland开发工具3.安装bee工具 go get github.com/beego/bee4.通过bee api dsh -tables=&quo ...

  8. python基础-python函数参数为print语句时的输出

    函数参数输入print语句,调用函数时都会执行print语句,实例: def outer(func): def inner(): print("我是内层函数!") return i ...

  9. Cocos2d-X多线程(2) 线程的互斥量std::mutex和线程锁

    多个线程同时访问共享资源时,经常会出现冲突等.为了避免这种情况的发生,可以使用互斥量,当一个线程锁住了互斥量后,其他线程必须等待这个互斥量解锁后才能访问它. thread提供了四种不同的互斥量: 1. ...

  10. python学习之生函数名的理解

    4.4.10 函数名的应用 函数名就是一个特殊的变量,后边跟上()之后可以执行函数: 1.作为一个变量使用 def func(): print('123') f1 = func f2 = f1 f1( ...