<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. Spring4 MVC json问题(406 Not Acceptable)

    最近使用spring4.0的Mvc,json请求时,客户端报错,406 Not Acceptable 解决方法: 1.导入第三方的fastjson包,fastjson-1.1.34.jar 2.Spr ...

  2. JavaWeb之上传与下载

    文件上传概述: 1,文件上传对页面的要求: 必须使用表单,而不能是超链接 表单的method必须是post 表单的enctype必须是multipart/form-data 在表单中添加file表单字 ...

  3. Eclipse中文插件安装教程

    先运行英文版Eclipse 点击Help选择Install New Software 直接点击Add按钮 Name输入: Babel Location输入: http://download.eclip ...

  4. SQL 表 数据备份

    insert into SMTTemporarySave select * from [MSV0CIMDB].[PICS_20170706].dbo.SMTTemporarySave

  5. centos6.4编译gcc6.4

    #!/bin/bash dir=$(pwd) echo $dir cd $dir #wget https://gmplib.org/download/gmp/gmp-6.1.2.tar.xz .tar ...

  6. erlang创建100万个进程,每一个进程花费多少时间呢?

    最近工作需要,需要先测试一下erlang启动进程的时间开销: 看了一片博客,感觉挺好的,学习erlang推荐http://www.blogjava.net/yongboy/ 于是参照他的文章里面的一个 ...

  7. jdbcTemplate的queryForList的使用方法

    jdbcTemplate的queryForList的使用方法如下,它不一样的地方是,它获得的结果,会再放到一个map里去: List rows = jdbcTemplate.queryForList( ...

  8. 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_03.入门程序之需求分析

  9. zabbix日志报错解决

    [root@bogon ldap]# cat /tmp/zabbix_server.log 9135:20181204:085433.351 using configuration file: /us ...

  10. python学习之函数(二)

    4.4.6 动态传参 动态传参是针对形参而言 1.动态位置参数 ​ 在静态位置参数时,我们知道,定义函数时有几个位置参数,调用时就必须给几个实参,不能多也不能少.有时候,实际应用过程中,参数往往不能固 ...