<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. python学习之路(14)

    通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后面绝大多数元素 ...

  2. HomeBrew安装MongoDB如何启动

    1.先安装HomeBrew 安装(需要 Ruby): ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/in ...

  3. 6张图解释IO流

    1.字节流InputStream 2.字节流OutputStream 3.字符流Reader 4.字符流Writer 5.节点流 6.处理流 总结: 节点流可以直接连接在数据源上,处理流不可以:节点流 ...

  4. hdjs---laravel 框架使用hdjs 实现多图上传功能

    hdjs---laravel 框架使用hdjs 实现多图上传功能 一.总结 一句话总结: [在网上找hdjs的使用实例]和[能遇见讲hdjs的视频],也是完全搞懂hdjs的不错的方式 1.hdjs中的 ...

  5. php 发送邮件(2)qq邮箱开通

    一 首选登录qq邮箱,在最上面那里找到设置,点击打开 二 下拉,找到账号安全和它下面的内容 ,开启服务 imap/smtp

  6. Centos6 源码安装mysql5.6

    这里介绍如何使用centos6.*来安装mysql5.6版本. 先做一下准备工作 确定好用于运行mysql的用户,安全起见,建议拒绝次用户登录,仅用于运行程序. useradd mysql -s/sb ...

  7. 在RHEL6_Oracle_Linux_6上生成正确的udev_rule_规则文件

    1. #首先确认是 Linux 6.0以上版本 [root@vrh6 dev]# cat /etc/issue          Oracle Linux Server release 6.2Kern ...

  8. form 组件如何扩展user的字段

    第一步 先将一个包引进来 第二步创建一个类加入你想要的字段

  9. django 视图常用操作

    获取参数. 类型是QueryDict https://www.cnblogs.com/zhaoyang-1989/p/11989515.html request.POST.get('参数名') req ...

  10. Web前端学习书籍

    <Head First HTML5 Programming> 介绍如何利用HTML5来搭建Web应用,包含JavaScript内容. <CSS禅意花园>: 不是入门的书籍,对C ...