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 多行滚动代码(附详细解释)
Jun 17 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
微信小程序实现树莓派(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 goto语句简介和使用实例
2014/03/11 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Django xadmin安装及使用详解
2020/10/26 Python
Python 图片处理库exifread详解
2021/02/25 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
.NET面试10题
2014/02/24 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
国际贸易专业求职信
2014/06/04 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
司机岗位职责说明书
2014/07/29 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
加入学生会自荐书
2015/03/05 职场文书
求职自我推荐信
2015/03/24 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
导游词之四川武侯祠
2019/10/21 职场文书