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

我不是女神ヾ 2022-10-07 08:50 277阅读 0赞

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

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

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

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

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

HTML代码

![Image 1][]

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 选择图片并且实现预览效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element组件el-input选择图片后预览显示

选择图片后显示预览图片 ![在这里插入图片描述][f103c9cc69324f93abea7a42a0a34b63.png_pic_center] 1.加入点击事件和

迷南。/ 2024年03月16日 23:52/ 0 赞/ 23 阅读

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

通过标签，给它指定type类型为file，可提供文件上传； accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/\； multiple：规定是否可

约定不等于承诺〃/ 2023年01月17日 10:54/ 0 赞/ 82 阅读

相关 html5 input file视频预览,input type=file 选择图片并且实现预览效果的实例

通过标签，给它指定type类型为file，可提供文件上传； accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/\； multiple：规定是否可

我不是女神ヾ/ 2022年10月07日 08:50/ 0 赞/ 278 阅读

相关 html选择本地图片即时预览

最近在做一个.net mvc的网站，想让用户在网页中上传图片的过程中预览图片，本以为很简单，以为可以直接在html中解决，百度了很多才发现貌似挺麻烦，综合一些大神的回答，

谁践踏了优雅/ 2022年09月22日 11:44/ 0 赞/ 229 阅读

相关上传图片预览JS脚本 Input file图片预览的实现示例

需要一个用户上传头像预览的功能，因此写了一段上传图片预览JS脚本,Input file图片预览的实现，需要的朋友可以看看好东西要分享！在深圳做项目的时候，需要

快来打我*/ 2022年07月27日 12:00/ 0 赞/ 241 阅读

相关 file，js图片预览

URL.createObjectURL和URL.revokeObjectURL(不适用低版本浏览器) 一.URL.createObjectURL URL.c

╰半夏微凉°/ 2022年06月15日 23:18/ 0 赞/ 274 阅读

相关 HTML选择图片直接预览效果

直接上代码 <!DOCTYPE html> <html> <head> <meta name="viewport" cont

超、凢脫俗/ 2022年05月30日 04:18/ 0 赞/ 212 阅读

相关 input files的预览图||文件列表删除操作

<table style="table-layout:fixed;width:821px;"> <tbody> <tr> <td><p>查看演示示例</p>

- 日理万妓/ 2022年05月28日 04:18/ 0 赞/ 106 阅读

相关简单的图片上传并预览功能input[file]

为了好看点，样式写的有点多，读取文件之前参考别人的，现在自己写也当给自己记录一下学习进度，欢迎大家一起交流。 <!DOCTYPE html> <html la

柔情只为你懂/ 2022年05月21日 12:49/ 0 赞/ 169 阅读

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2167 阅读