拖拽上传(预览图片)

需求

点击+上传图片,或直接拖拽图片到红色方框里面也可上传图片,上传后预览图片

效果

实现

html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片文件拖拽上传</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
      width: 200px;
      height: auto;
    }

    .show-img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 800px;
      height: 320px;
      margin: 100px auto;
      border: 1px solid red;
    }

    .container {
      display: flex;
    }

    .upload {
      position: relative;
      width: 100px;
      height: 100px;
      border: 2px dashed #ccc;

    }

    .upload::before,
    .upload::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      background-color: black;
    }

    .upload::before {
      width: 20px;
      height: 4px;

    }

    .upload::after {
      width: 4px;
      height: 20px;
    }

    /* 触发file类型的Input上传文件不一定要点击上传按钮,点在Input身上即可 */
    #file-input {
      opacity: 0;
      box-sizing: border-box;
      width: 100px;
      height: 100px;
    }

    .preview {
      position: relative;
      width: 100px;
      height: 100px;
      margin: 0 20px;
      border-radius: 5px;
    }

    .preview-img {
      width: 100%;
      height: 100%;
    }

    .delete {
      position: absolute;
      width: 10px;
      height: 10px;
      top: -5px;
      right: -5px;
      color: red;
    }
  </style>
</head>

<body>
  <form class="container" action="">
    <div class="upload">
      <input type="file" id="file-input" hidden>
    </div>
    <div class="show-box"></div>
  </form>
  

  <div class="show-img"></div>
  <script>
    let input = document.querySelector('input[type="file"]');
    let showImg = document.querySelector('.show-img');
    let imgInput = document.querySelector('#file-input');
    let uploadBox = document.querySelector('.upload');

    //点击别的位置调用inputFile功能
    uploadBox.addEventListener('click',function(e){
      imgInput.click();
    },false);

    //拖拽上传
    showImg.addEventListener('dragover',function(e){
     e.preventDefault();
    },false);

    showImg.addEventListener('drop',function(e){
      e.preventDefault();
      let file =  e.dataTransfer.files[0];
      createBolbFile(file)
    },false);

  
    //点击input上传
    input.addEventListener('change', function (e) {
      console.log(input.files[0]);//拿到input当前上传的文件,拿不到url,想在页面展示必须有url
      let file = this.files[0];
      // createFileReader(file);
       createBolbFile(file)
    }, false);


    function createImg(src){
      let img = document.createElement('img');
      img.src = src;
      showImg.append(img);
    }

    //生成临时blob存储
    function createBolbFile(file){
      let url = URL.createObjectURL(file); //生成一个临时地址blob,不可持续
      //创建一个url的blob ,在当前会话下生效,不像base64那样在哪里都能用,如在浏览器中用,当你关掉浏览器再开浏览器用则不生效,是一种临时文件
      createImg(url)
    }

    //base64存储
    function createFileReader(file) {
      let fileReader = new FileReader();//通过FileReader的result可以拿到文件的url
      
      fileReader.readAsDataURL(file);//把文件创建成url的data对象

      fileReader.onload = function () { //file加载完成才可以拿到url
        let src = this.result  //base64存储
        createImg(src);
      }

    }


    /* 
      base64存储

      base64是新的文件协议格式,传输8bit字节码的编码方式,借助64个可以表示字符[A,B,C...1,2,3] 转换二进制 

      base64 字符串通用性很强 不依赖平台 不依赖环境 可持续 ,可以以字符串的形式传输图片、文档等
        
      可以很方便的用来展示图片,下载文档
      
      -----------------------------------------------

      blob存储

      如果要持续存储用base64,只是临时调用用blob
      blob网址URL

      只能在浏览器内部生成 

      URL/Object 允许Blob 和 file对象用作图像上 二进制数据连接URL源 

      URL.createObjectURL(file) 生成地址

      同一个会话中 同一个浏览器实例中可以使用 临时的对象地址 不可持续
    
    */
  </script>
</body>

</html>
相关推荐
GISer_Jing18 分钟前
Vue前端进阶面试题目(二)
前端·vue.js·面试
乐闻x37 分钟前
Pinia 实战教程:构建高效的 Vue 3 状态管理系统
前端·javascript·vue.js
weixin_431449681 小时前
web组态软件
前端·物联网·低代码·编辑器·组态
橘子味小白菜1 小时前
el-table的树形结构后端返回的id没有唯一键怎么办
前端·vue.js
前端Hardy1 小时前
HTML&CSS:比赛记分卡
前端·javascript·css·3d·html
疯狂的沙粒2 小时前
Vue项目开发 element-UI 前端实现 1到10排列选择的按钮
前端·vue.js·ui
刺客-Andy2 小时前
React第六节 组件属性prop的propTypes类型使用介绍
前端·javascript·react.js·typescript
Mr.Liu62 小时前
小程序24-滚动效果:scroll-view组件详解
前端·微信小程序·小程序
是萝卜干呀3 小时前
Frontend - 防止多次请求,避免重复请求
javascript·ajax·jquery·防抖·节流·disabled属性
三金121383 小时前
局部使用Vue
前端·javascript·vue.js