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

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

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

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

  1. <input type="file" accept="image/*" multiple="multiple"/>

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

HTML代码

  1. <body>
  2.     <div id="box">
  3.         <img id="imgshow" src="" alt=""/>
  4.     </div>
  5.     <div id="pox">
  6.         <input id="filed" type="file" accept="image/*"/>
  7.     </div>
  8. </body>

css样式文件

  1.   <style>
  2.         #box{
  3.             width: 300px;
  4.             height: 300px;
  5.             border: 2px solid #858585;
  6.         }
  7.         #imgshow{
  8.             width: 100%;
  9.             height: 100%;
  10.         }
  11.         #pox{
  12.             width: 70px;
  13.             height: 24px;
  14.             overflow: hidden;
  15.         }
  16.     </style>

JS代码

  1. <script>
  2.         //在input file内容改变的时候触发事件
  3.         $('#filed').change(function(){
  4.         //获取input file的files文件数组;
  5.         //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
  6.         //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
  7.             var file = $('#filed').get(0).files[0];
  8.         //创建用来读取此文件的对象
  9.             var reader = new FileReader();
  10.         //使用该对象读取file文件
  11.             reader.readAsDataURL(file);
  12.         //读取文件成功后执行的方法函数
  13.             reader.onload=function(e){
  14.         //读取成功后返回的一个参数e，整个的一个进度事件
  15.                 console.log(e);
  16.         //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
  17.         //的base64编码格式的地址
  18.                 $('#imgshow').get(0).src = e.target.result;
  19.             }
  20.         })
  21. </script>

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

 

input type=file 选择图片并且实现预览效果的更多相关文章

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

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  4. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  5. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

  6. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  7. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. input[type="file"]的图片预览

    在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...

  9. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

随机推荐

  1. [TJOI2016 & HEOI2016] 字符串

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4556 [算法] 不难发现 , 对于每个询问        ans = max{ mi ...

  2. ubuntu系统，关于源（source）的配置

    1. 现象:(出现的错误) 执行 sudo apt-get update, 报错:apt-get 404 Not Found Package Repository Errors 执行 sudo apt ...

  3. HDU2844(多重部分和)

    Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. Flutter实战视频-移动电商-16.补充_保持页面状态

    16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是 ...

  5. Laravel中的模型的创建

    <?phpnamespace App; use Illuminate\Database\Eloquent\Model; class Admin extends Model{ //指定表名 pro ...

  6. UVa 10723 Cyborg Genes (LCS, DP)

    题意:给定两行字符串,让你找出一个最短的序列,使得这两个字符串是它的子串,并且求出有多少种. 析:这个题和LCS很像,我们就可以利用这个思想,首先是求最短的长度,不就是两个字符串长度之和再减去公共的么 ...

  7. yzm10铺瓷砖 yzm10原创系列

    yzm10铺瓷砖 一天yzm10接到任务,要求用2×1大小的瓷砖,来铺2×4的地面,地面需要恰好被铺满.这对yzm10来说太容易了,于是他马上设计出了5种不同的铺法(旋转情况算不同种,如图示2.4). ...

  8. ES6笔记总结

    常用命令 函数的rest参数和扩展 promise使用 module.exports和Es6 import/export的使用 function sum(x,y,z){ let total = 0; ...

  9. TP5之发送邮件

    1.下载扩展,vendor\phpmailer 文件结构: 2.话不多说,上代码    注意点: ·   需要提前开通对应邮箱的SMTP服务 ·  $mail->Host = "  & ...

  10. ajaxForm上传文件到本地服务器（封装）

    不啰嗦,直接看代码 1.html: <div class="con-item fix"> <span class="f">文章封面< ...