JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析


Posted in Javascript onFebruary 12, 2020

本文实例讲述了JS+HTML实现自定义上传图片按钮并显示图片功能的方法。分享给大家供大家参考,具体如下:

在web开发中,上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮,且不能修改UI。如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并将input铺在界面上方:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>图片上传</title>
</head>
<body>
  <!-- 要将父布局的position设置为relative,父布局将无法包裹input -->
  <div style="position: relative;">
    <!--设置input的position为absolute,使其不按文档流排版,并设置其包裹整个布局 -->
    <!-- 设置opactity为0,使input变透明 -->
    <!-- 只接受jpg,gif和png格式 -->
    <input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" />
    <!-- 自定义按钮效果 -->
    <div style="text-align: top">
      <span style="font-size: 12px;">上传文件:</span>
      <img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" />
    </div>
  </div>
</body>
</html>

效果如下:

JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
图片上传

这样,自定义按钮效果就完成了。但是,这样还不能把图片显示出来。要实现显示上传图片功能,可以通过以下方法实现:

  1. FileReader将文件转Base64显示。FileReader能够异步读取文件,并将文件转化为可读取的编码。我们可以通过input获取上传图片的file实例。我们可以通过FileReader将file实例转化为Base64,然后通过img标签加载图片的Base64编码。
<script type="text/javascript">
  function showImg(input) {
    var file = input.files[0];
    var reader = new FileReader()
    // 图片读取成功回调函数
    reader.onload = function(e) {
      document.getElementById('upload').src=e.target.result
    }
    reader.readAsDataURL(file)
  }
</script>
  1. 通过window.URL.createObjectURL创建url。通过该方法可以为file实例创建一个临时的url,img可以通过该url将图片加载出来。由于是临时的url,因此同一个file实例,每次创建的url都会不一样:
function showImg(input) {
    var file = input.files[0];
    var url = window.URL.createObjectURL(file)
    document.getElemtById('upload').src=url
  }

使用上述方法中的其中一种,并将showImg方法挂在input的onchange属性上,就能够显示图片了:

<input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" 
type="file" accept="image/gif, image/jpg, image/png" 
onchange="showImg(this)"/>

显示效果如下:

JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
显示上传的图片

上述代码中,点击input标签时,一次性只能选择一张图片,如果要选择多张图片,则要给input添加multiple属性:

<input id="upload-input" 
style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" 
accept="image/gif, image/jpg, image/png" multiple onchange="showImg(this)"/>

然后通过多个img显示files里面的图片即可,代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>图片上传</title>
</head>
<body>
  <!-- 要将父布局的position设置为relative,父布局将无法包裹input -->
  <div style="position: relative;">
    <!--设置input的position为absolute,使其不按文档流排版,并设置其包裹整个布局 -->
    <!-- 设置opactity为0,使input变透明 -->
    <!-- 只接受jpg,gif和png格式 -->
    <input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)" multiple />
    <!-- 自定义按钮效果 -->
    <div style="text-align: top">
      <span style="font-size: 12px;">上传文件:</span>
      <img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" />
    </div>
  </div>
  <div id="imgContainer" style="margin-top: 10px;"></div>
</body>
<script type="text/javascript">
  function showImg(obj) {
    var files = obj.files
    // document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
    getImgsByFileReader(document.getElementById("imgContainer"), files)
  }
  // 使用window.URL.createObjectURL(file)读取file实例并显示图片
  function getImgsByUrl(files) {
    var elements = ''
    for (var i = 0; i < files.length; i++) {
      var url = window.URL.createObjectURL(files[i])
      elements += "<img src='"+ url + "' style='width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;' />"
    }
    return elements
  }
  // 使用FileReader读取file实例并显示图片
  function getImgsByFileReader(el, files) {
    for (var i = 0; i < files.length; i++) {
      let img = document.createElement('img')
      img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
      el.appendChild(img)
      var reader = new FileReader()
      reader.onload = function(e) {
        img.src = e.target.result
      }
      reader.readAsDataURL(files[i])
    }
  }
</script>
</html>

最终显示效果如图:

JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
多图上传

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery获得子元素个数的方法
Apr 14 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 #Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 #Javascript
使用webpack搭建pixi.js开发环境
Feb 12 #Javascript
十分钟教你上手ES2020新特性
Feb 12 #Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 #Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 #Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 #Javascript
You might like
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
php仿discuz分页效果代码
2008/10/02 PHP
php连接数据库代码应用分析
2011/05/29 PHP
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
js友好的时间返回函数
2016/08/24 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
js实现随机点名
2021/01/19 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python flask中动态URL规则详解
2019/11/22 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
会计与审计专业自荐信范文
2014/03/15 职场文书
党员干部一句话承诺
2014/05/30 职场文书
对照检查剖析材料
2014/09/30 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2014年招商工作总结
2014/11/22 职场文书
2016中秋节广告语
2016/01/28 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python