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实现网页查找功能示例分享
Feb 12 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
Javascript动画效果(2)
Oct 11 Javascript
vue.js实例todoList项目
Jul 07 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 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模板之Phpbean的目录结构
2008/01/10 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
js实现电灯开关效果
2021/01/19 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
python图像处理之反色实现方法
2015/05/30 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python实现简单成绩录入系统
2019/09/19 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
毕业生简单求职信
2013/11/19 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书