javascript 图片按钮-JS+HTML实现自定义上传图片按钮及显示图片功能的方法解析

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

更新时间：2020年2月12日12:04:17 作者：我翔1314

本文主要介绍JS+HTML的方式实现自定义上传图片和显示图片的功能。 结合实例分析了JavaScript图片上传、编码转换等相关操作方法。 有需要的同学可以参考以下

本文通过实例介绍了JS+HTML技术实现自定义上传图片和显示图片的功能。 分享给大家，供大家参考，如下：

在Web开发中，可以通过类型为file的input标签来实现上传文件的功能。 但输入的显示效果只有一键，UI无法改变。 如果要实现自定义上传按钮，通常需要将input设置为不可见，然后将input和自定义界面放在同一个div中，并将input放在界面之上：

  
  


  
  

    
    
    
    
    
    

      上传文件：
      
    
  

疗效如下：

上传图片

这样，自定义按钮效果就完成了。 而且，这样图片也无法显示。 要实现显示上传图片的功能，可以通过以下方式实现：

FileReader 将文件转换为 Base64 以供显示。 FileReader可以异步读取文件并将其转换为可读的代码。 我们可以通过输入获取上传图片的文件实例。 我们可以通过FileReader将文件实例转换为Base64，然后通过img标签加载图像的Base64编码。

  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)
  }

通过window.URL.createObjectURL创建url。 这样就可以为文件实例创建一个临时url，img可以通过这个url加载图片。 因为它是临时 urljavascript 图片按钮javascript 图片按钮，所以同一个文件实例每次都会创建不同的 url：

  function showImg(input) {
    var file = input.files[0];
    var url = window.URL.createObjectURL(file)
    document.getElemtById('upload').src=url
  }

使用以上方法之一，将showImg方法挂在input的onchange属性上，即可显示图片：

疗效如下：

显示上传的图片

在上面的代码中，当点击输入标签时，一次只能选择一张图像。 如果要选择多张图像，则必须在输入中添加 multiple 属性：

之后就可以通过多个imgs来显示文件上的图片了。 代码如下：

  
  


  
  

    
    
    
    
    
    

      上传文件：
      
    
  
  



  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 += ""
    }
    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])
    }
  }

最终疗效如图所示：

上传多张图片

对JavaScript相关内容比较感兴趣的读者可以查看本站专题：《JavaScript图片操作方法大全》、《JavaScript切换特效及方法总结》、《JavaScript运动疗效及方法总结》、《JavaScript动画》效果与方法总结》、《JavaScript错误与调试方法总结》、《JavaScript数据结构与算法方法总结》、《JavaScript遍历算法与方法总结》、《JavaScript物理操作使用总结》

希望这篇文章对您的 JavaScript 编程有所帮助。