<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. 分布式-信息方式-ActiveMQ的消息存储持久化

    ActiveMQ的消息存储持久化■概述ActiveMQ不仅支持 persistent和 non-persistent两种方式,还支持消息的恢复( recovery)方式PTPQueue的存储是很简单的 ...

  2. python环境下安装virtualenv,virtualenvwrapper

    在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同的工程使用 ...

  3. Springboot 项目中引入WebSocket后,单元测试出现错误

    报错信息 java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test. ...

  4. @RepositoryRestResource注解的使用

    1.Build with Maven <?xml version="1.0" encoding="UTF-8"?> <project xmln ...

  5. CRC32算法C#中的实现

    代码如下: using System; using System.Collections.Generic; using System.Text; using System.IO; namespace ...

  6. Emacs常用命令快速参考

    原文地址 Emacs常用命令的汇总,来自Emacs参考卡片 注意:以下命令中标注的按键,大写的C代表Control,在键盘上通常是Ctrl键,而M代表Meta,在键盘上通常是Alt键,S则代表Shif ...

  7. Python的环境的搭建

    下载Python软件安装,配置环境变量 给Eclipse安装pydev插件即可

  8. Linux_ubuntu命令-用户、权限管理

    用户是Unix/Linux系统工作中重要的一环,用户管理包括用户与组账号的管理. 在Unix/Linux系统中,不论是由本机或是远程登录系统,每个系统都必须拥有一个账号,并且对于不同的系统资源拥有不同 ...

  9. WPF 模拟迅雷TabControl界面

    WPF模拟迅雷TabControl界面 点击查看下载 <!--TabControl样式--> <Style x:Key="TabControlStyle" Tar ...

  10. 设置terminal 命令别名

    vi -/.bash_profile code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" ...