选择展示图片

最新推荐文章于 2024-07-31 16:33:32 发布

智芝星

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量206

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45750263/article/details/127106645

版权

选择展示图片

图片选择
图片显示
- 方法一：window.URL
- 方法二：fileReader
全部代码展示

图片选择

使用html的input标签，type设置为file就是文件选择,accept属性控制用户可选择的文件类型，设置multiple可多选文件。

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

通常情况下我们只是需要这个选择文件的功能，不需要着原始丑陋的UI。所以一般情况下是设置这个标签的样式 display为none，然后自己写UI，要选择文件功能时，就用click方法触发这个文件选择标签的文件选择功能。

  <input type="file" accept="image/*" onchange="handlefiles(this.files)" style="display:none" multiple id="fileElem">

  let fileElem=document.querySelector('#fileElem')
  fileElem.click();

图片显示

方法一：window.URL

详情看下方注释

//不同的浏览器URL对象名不一样，所以需要统一一下
  window.URL=window.URL||window.webkitURL;
  function firstUpload(files){
    for(let i=0;i<files.length;i++){
      let file=files[i];
      let li=document.createElement('li');
      let img=document.createElement('img');
      //通过URL兑对象上的createObjectURL方法来创建URL复制给img标签的src
      img.src=window.URL.createObjectURL(file);
      img.onload=function(){
      //因为每次创建的URL对象如果不手动释放掉，在浏览器未退出文档前不会释放内存，造成内存占用，所以需要用revokeObjectURL主动释放内存
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      list.insertBefore(li,list.firstChild);
    }
  }

方法二：fileReader

详情看下方注释

  function secondUpload(files){
    for(let i=0;i<files.length;i++){
      let file=files[i];
      let li=document.createElement('li');
      let img=document.createElement('img');
      //使用filReader对象的readAsDataURL来将用户选择的文件转化为URL给img标签使用，展示图片
      let reader=new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(){
        img.src=reader.result;
      }
      li.appendChild(img);
      list.insertBefore(li,list.firstChild)
    }
  }

全部代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" accept="image/*" onchange="handlefiles(this.files)" style="display:none" multiple id="fileElem">
  <button onclick="onClick('first')">方法一上传</button>
  <button onclick="onClick('second')">方法二上传</button>
  <ul id="list">

  </ul>
</body>
<script>
  window.URL=window.URL||window.webkitURL;
  let fileElem=document.querySelector('#fileElem')
  let list=document.querySelector('#list')
  let uploadType=''
  function onClick(type){
    uploadType=type;
    fileElem.click();
  };
  function handlefiles(files){
    if(!files.length){
      return;
    }
    uploadType=='first'?(firstUpload(files)):(secondUpload(files))
  }
  // 第一种显示图片的方法
  window.URL=window.URL||window.webkitURL;
  function firstUpload(files){
    for(let i=0;i<files.length;i++){
      let file=files[i];
      let li=document.createElement('li');
      let img=document.createElement('img');
      img.src=window.URL.createObjectURL(file);
      img.onload=function(){
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      list.insertBefore(li,list.firstChild);
    }
  }
  // 方法二
  function secondUpload(files){
    for(let i=0;i<files.length;i++){
      let file=files[i];
      let li=document.createElement('li');
      let img=document.createElement('img');
      let reader=new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(){
        img.src=reader.result;
      }
      li.appendChild(img);
      list.insertBefore(li,list.firstChild)
    }
  }
</script>
</html>

智芝星

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择展示图片

选择展示图片通常情况下我们只是需要这个选择文件的功能，不需要着原始丑陋的UI。所以一般情况下是设置这个标签的样式 display为none，然后自己写UI，要选择文件功能时，就用click方法触发这个文件选择标签的文件选择功能。使用html的input标签，type设置为file就是文件选择,accept属性控制用户可选择的文件类型，设置multiple可多选文件。// 第一种显示图片的方法。
复制链接

扫一扫