在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果

最新推荐文章于 2024-09-11 15:07:58 发布

軒舞

最新推荐文章于 2024-09-11 15:07:58 发布

阅读量3.2k

点赞数

文章标签：在html中的file怎么只能选择图片

通过标签，给它指定type类型为file，可提供文件上传；

accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；

multiple：规定是否可以选择多个文件；

规定只可上传图片，且可以选择多个文件

当然，直接一个input type=file 只能选择上传的文件/资源，如果我们需要在选择图片之后，在当前页面实现预览效果，那么我们可以如下方式来实现

HTML代码

css样式文件

#box{

width: 300px;

height: 300px;

border: 2px solid #858585;

}

#imgshow{

width: 100%;

height: 100%;

}

#pox{

width: 70px;

height: 24px;

overflow: hidden;

}

JS代码

//在input file内容改变的时候触发事件

$('#filed').change(function(){

//获取input file的files文件数组;

//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;

//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];

var file = $('#filed').get(0).files[0];

//创建用来读取此文件的对象

var reader = new FileReader();

//使用该对象读取file文件

reader.readAsDataURL(file);

//读取文件成功后执行的方法函数

reader.οnlοad=function(e){

//读取成功后返回的一个参数e，整个的一个进度事件

console.log(e);

//选择所要显示图片的img，要赋值给img的src就是e中target下result里面

//的base64编码格式的地址

$('#imgshow').get(0).src = e.target.result;

}

})

*以上js代码中有使用到jQuery，因此要引入jQuery文件

input type=file 选择图片并且实现预览效果的实例

为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

html input type=file 选择图片,图片预览纯html js实现图片预览

up").change(function() { var $file = $(this); var fileObj = $ ...

随机推荐

angularjs 动态加载事件的另一种实现

/** 初始化酒店列表 */ function inintHotel(params,url,$http,$scope){ $http.jsonp(url).success(function(res, ...

EF Code First：实体映射，数据迁移，重构(1)

一.前言经过EF的,我们已经把数据访问层基本搭建起来了,但并没有涉及实体关系.实体关系对于一个数据库系统来说至关重要,而且EF的各个实体之间的联系,实体之间的协作,联合查询等也 ...

spring &commat;resource &commat; Autowired

Spring中什么时候用@Resource,什么时候用@service 当你需要定义某个类为一个bean,则在这个类的类名前一行使用@Service("XXX"),就相当于讲这个类 ...

解析java泛型(一)

对于我们java中的泛型,可能很多人知道怎么使用并且使用的还不错,但是我认为想要恰到好处的使用泛型,还是需要深入的了解一下它的各种概念和内部原理.本文将尽可能的囊括java泛型中的重要的概念.主要内容 ...

发布到ASP&period;NET CORE项目到 Windows server 2012

原文: https://github.com/zeusro/MarkdownBlog/blob/master/2018/2018-01-17-01.md 发布到ASP.NET CORE项目到 Wind ...

Go笔记-结构体

[定义] type identifier struct{ field1 type1 field2 type2 ... } // 声明 var s identifier identifier.field ...

深入解剖unsigned int 和 int

就如同int a:一样,int 也能被其它的修饰符修饰.除void类型外,基本数据类型之前都可以加各种类型修饰符,类型修饰符有如下四种: 1.signed----有符号,可修饰char.int.Int ...

Notepad++ 安装连接服务器的NppFTP插件

用Notepad++连接服务器,可以随时编辑一些文件不用特意下载.有时重做系统经常忘记一些插件备份到了哪.再此做个记录,方便重新安装. 下载完NppFTP插件,解压后将bin文件夹下的NppFTP.d ...

如何注册Tomcat到Window Service服务

win+R打开运行窗口,输入cmd打开dos窗口,使用cd命令将位置切换到tomcat路径下的bin文件,本机是F盘下. 先输入F:回车进入F盘,然后输入命令cd F:\apache-tomcat-5 ...

parrot os 更新到3&period;7后无法上网(DNS暂时无法解析)

parrot os 更新到最新后可能ping的通IP,ping不通域名,是DNS解析出问题了修改/etc/resolv.conf sudo rm /etc/resolv.conf sudo vi / ...