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

约定不等于承诺〃 2023-01-17 10:54 110阅读 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 条评论，110人围观）

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

相关阅读

相关如何简单实现视频预览和图片预览

> 工作需要做一个视频预览和图片预览，于是就发现了一个简单省事的预览方法，供大家参考一下，请多指教啊 var videoExts = [".avi", ".mp4",

小灰灰/ 2023年07月25日 06:14/ 0 赞/ 48 阅读

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

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

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

相关 vue word预览，excel预览，pdf预览

一、word预览–mammoth.js 安装：`npm install --save mammoth` tip：只能预览.docx文件 word.vue:

淩亂°似流年/ 2022年11月15日 11:13/ 0 赞/ 673 阅读

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

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

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

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

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

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

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 482 阅读

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

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

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

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 698 阅读

相关 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1282 阅读

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

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

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