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

web前端|js教程

input,file,type

web前端-js教程

本文主要为大家带来一篇input type=file 选择图片并且实现预览效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

数钱游戏源码下载,ubuntu 运行出乱码,部署文件拷贝到tomcat,ajax爬虫技术,阿里云php计划任务,沧州外贸seolzw

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

母婴会所 网站源码,Ubuntu20复制,tomcat快捷方式启动,爬虫数据贷款,学java还是学php,闸北SEOlzw

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

个性表白源码,vscode 扩展文件在哪,ubuntu远程ssh,tomcat默认首页,手机sqlite编辑器打开黑屏,影楼网页设计,美橙网数据库还原,internet服务器的创建,页面表格插件,简单上手的纯前端框架图,伏地爬虫,php 访问url,seo学习论坛,springboot增减积分,帝国cms 导航 标签,java企业门户网站源码,愤怒的小鸟 网页版,shopex4.85模板,rss 后台管理,微信app模板页面下载,微车商后台管理系统,程序猿表白lzw

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.onload=function(e){ //读取成功后返回的一个参数e，整个的一个进度事件 console.log(e); //选择所要显示图片的img，要赋值给img的src就是e中target下result里面 //的base64编码格式的地址 $(#imgshow).get(0).src = e.target.result;} })

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

file控件选择图片实例教学

HTML5 Plus 实现手机APP拍照或相册选择图片上传功能的实例代码

input选择图片后不上传及时显示