前端笔记之文件上传组件

已于 2023-05-31 14:54:32 修改
阅读量319 收藏
点赞数
文章标签： 前端 css html
于 2023-05-30 14:40:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41910359/article/details/130946940
版权

自己封装的一个贼拉丑文件上传组件


哈哈哈哈哈哈，真的好丑。。。。

1.实现思路

首先是一个文件上传的区域，本身就是大的label元素，绑定了一个隐藏的input type=file，然后就往后传文件，监听文件变化后就将这个label隐藏，切换出显示进度条的页面，等进度条完成后再切换预览页面。
代码很粗糙，仅限于写个demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .upload-area,
    .uploading,
    .after-upload {
      width: 250px;
      height: 250px;
      border-radius: 5px;
      background-color: rgb(240, 234, 234);
      box-shadow: 5px 5px 5px rgb(190, 190, 190);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .uploading {
      flex-direction: column;
    }

    .before-upload {
      width: 100%;
      height: 100%;
    }

    .label-upload {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .upload-area.status-0>.uploading,
    .upload-area.status-0>.after-upload {
      display: none;
    }

    .upload-area.status-1>.before-upload,
    .upload-area.status-1>.after-upload {
      display: none;
    }

    .upload-area.status-2>.before-upload,
    .upload-area.status-2>.uploading {
      display: none;
    }

    .progress {
      margin: 0 10%;
      width: 80%;
      height: 20px;
      border-radius: 10px;
      background-color: rgba(250, 250, 250, 0.5);
      box-shadow: 1px 1px 1px rgba(148, 148, 148, 0.3);
    }

    .progress>.progress-bar {
      width: var(--bar-width);
      height: 20px;
      border-radius: 10px;
      background-color: rgb(70, 111, 201);
    }

    .progress>.progress-str {
      color: rgb(119, 119, 119);
    }

    .img-proview {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: contain;
    }
    #uploadFile{
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="upload-area status-0">
    <div class="before-upload">
      <input type="file" id="uploadFile" onchange="uploadFile()" />
      <div class="label-upload">
        <svg t="1685411854880" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2357" width="80" height="80">
          <path
            d="M930.738818 418.535831H605.170853V93.238515A93.080637 93.080637 0 0 0 512.135324 0a93.058083 93.058083 0 0 0-93.012974 93.261069v325.500303H93.396506a93.306177 93.306177 0 0 0-93.328731 93.261069 93.441502 93.441502 0 0 0 27.222759 66.173634 92.967866 92.967866 0 0 0 65.857878 27.561071h325.973938V930.806367c0 25.756745 10.216993 49.077651 27.087435 65.902986a92.697218 92.697218 0 0 0 65.835323 27.312976 93.148299 93.148299 0 0 0 93.125745-93.215962V605.734592h325.567965c51.490936 0 93.238515-42.108444 93.215961-93.59938-0.022554-51.468382-41.770133-93.59938-93.215961-93.599381z"
            p-id="2358" fill="#cdcdcd"></path>
        </svg>
      </div>
    </div>
    <div class="uploading">
      <div class="progress-str"><span class="number">0</span>%</div>
      <div class="progress">
        <div class="progress-bar" style="--bar-width: 0%"></div>
      </div>
    </div>
    <div class="after-upload">
      <div class="img-proview">

      </div>
    </div>
  </div>
  <script>
    const uploadArea = document.querySelector(".upload-area");
    const progressBar = document.querySelector(".progress>.progress-bar");
    const progressNumber = document.querySelector(".uploading .number");
    function changeProgress(progress) {
      progressBar.setAttribute("style", `--bar-width:${progress}%`);
      progressNumber.innerText = `${progress}`;
    }
    async function uploadFile() {
      uploadArea.setAttribute("class", "upload-area status-1")
      const fileInput = document.querySelector("#uploadFile");
      if (fileInput.files.length === 0) {
        alert("请选择上传文件");
        return null;
      }
      upload(fileInput.files[0], oncomplete)
    }

    function upload(file, oncomplete) {
      const xhr = new XMLHttpRequest();
      xhr.onload = function () {
        const resp = JSON.parse(xhr.responseText);
        oncomplete(resp);
      }
      const formData = new FormData();
      formData.append('file', file);
      xhr.upload.onprogress = (e) => {
        console.log(e);
        // e下面有loaded属性为已经上传了多少数据，total为上传文件的总进度
        changeProgress(Math.floor(e.loaded / e.total * 100));
      };
      xhr.open("POST", "/local-api/file/singleFileUpload", true);
      xhr.send(formData);
    }

    function oncomplete(resp) {
      console.log(resp);
      uploadArea.setAttribute("class", "upload-area status-2")
      document.querySelector(".img-proview").setAttribute("style", `background-image: url("/local-api/${resp.data.src.replaceAll("\\", "/")}");`);
    }
  </script>
</body>

</html>

2拖拽上传

要想实现拖拽上传很简单只需要把上面的input取消隐藏，然后放大到撑满整个容器，设置opacity为0即可。但是，如果不想这么写，（是的，我不想），那么可以借助h5的ondrayenter、ondrayover、ondrop等api实现自己的一个可拖拽容器。
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .upload-area,
    .uploading,
    .after-upload {
      width: 250px;
      height: 250px;
      border-radius: 5px;
      background-color: rgb(240, 234, 234);
      box-shadow: 5px 5px 5px rgb(190, 190, 190);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .uploading {
      flex-direction: column;
    }

    .before-upload {
      width: 100%;
      height: 100%;
    }

    .label-upload {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .upload-area.status-0>.uploading,
    .upload-area.status-0>.after-upload {
      display: none;
    }

    .upload-area.status-1>.before-upload,
    .upload-area.status-1>.after-upload {
      display: none;
    }

    .upload-area.status-2>.before-upload,
    .upload-area.status-2>.uploading {
      display: none;
    }

    .progress {
      margin: 0 10%;
      width: 80%;
      height: 20px;
      border-radius: 10px;
      background-color: rgba(250, 250, 250, 0.5);
      box-shadow: 1px 1px 1px rgba(148, 148, 148, 0.3);
    }

    .progress>.progress-bar {
      width: var(--bar-width);
      height: 20px;
      border-radius: 10px;
      background-color: rgb(70, 111, 201);
    }

    .progress>.progress-str {
      color: rgb(119, 119, 119);
    }

    .img-proview {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;
    }
    .img-proview>.close-button{
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-image: radial-gradient(rgb(173, 170, 170), transparent );
      filter: drop-shadow(1px 1px 1px rgba(148, 148, 148, 0.3));
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="upload-area status-0">
    <div class="before-upload">
      <input type="file" id="uploadFile" style="display: none;" onchange="uploadFile()" />
      <label for="uploadFile" class="label-upload">
        <svg t="1685411854880" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2357" width="80" height="80">
          <path
            d="M930.738818 418.535831H605.170853V93.238515A93.080637 93.080637 0 0 0 512.135324 0a93.058083 93.058083 0 0 0-93.012974 93.261069v325.500303H93.396506a93.306177 93.306177 0 0 0-93.328731 93.261069 93.441502 93.441502 0 0 0 27.222759 66.173634 92.967866 92.967866 0 0 0 65.857878 27.561071h325.973938V930.806367c0 25.756745 10.216993 49.077651 27.087435 65.902986a92.697218 92.697218 0 0 0 65.835323 27.312976 93.148299 93.148299 0 0 0 93.125745-93.215962V605.734592h325.567965c51.490936 0 93.238515-42.108444 93.215961-93.59938-0.022554-51.468382-41.770133-93.59938-93.215961-93.599381z"
            p-id="2358" fill="#cdcdcd"></path>
        </svg>
      </label>
    </div>
    <div class="uploading">
      <div class="progress-str"><span class="number">0</span>%</div>
      <div class="progress">
        <div class="progress-bar" style="--bar-width: 0%"></div>
      </div>
    </div>
    <div class="after-upload">
      <div class="img-proview">
        <div class="close-button" onclick="closeCurrentImg()">
          <svg t="1685436626958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1443" width="38" height="38"><path d="M512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333zM671.061333 662.848c-19.242667 19.221333-50.410667 19.221333-69.632 0l-81.216-81.216-81.216 81.216c-19.242667 19.221333-50.410667 19.221333-69.632 0-19.221333-19.242667-19.221333-50.410667 0-69.632L450.581333 512l-81.237333-81.216c-19.221333-19.242667-19.221333-50.410667 0-69.632 19.242667-19.221333 50.410667-19.221333 69.632 0l81.216 81.216 81.216-81.216c19.242667-19.221333 50.410667-19.242667 69.632 0 19.221333 19.242667 19.221333 50.410667 0 69.632L589.824 512l81.237333 81.216C690.282667 612.458667 690.304 643.626667 671.061333 662.848z" fill="#dbdbdb" p-id="1444"></path></svg>
        </div>
      </div>
    </div>
  </div>
  <script>
    const uploadArea = document.querySelector(".upload-area");
    const beforeUpload = document.querySelector(".label-upload");
    const progressBar = document.querySelector(".progress>.progress-bar");
    const progressNumber = document.querySelector(".uploading .number");
    // 注册div的拖拽api
    beforeUpload.ondragenter = e => {
      e.preventDefault();
    };
    beforeUpload.ondragover = e => {
      e.preventDefault();
    };
    beforeUpload.ondrop = e => {
      e.preventDefault();
      document.querySelector("#uploadFile").files = e.dataTransfer.files
      uploadFile();
    };
    

    function changeProgress(progress) {
      console.log("progress", progress)
      progressBar.setAttribute("style", `--bar-width:${progress}%`);
      progressNumber.innerText = `${progress}`;
    }
    async function uploadFile() {
      uploadArea.classList.replace("status-0", "status-1");
      const fileInput = document.querySelector("#uploadFile");
      if (fileInput.files.length === 0) {
        alert("请选择上传文件");
        return null;
      }
      upload(fileInput.files[0], oncomplete)
    }

    function upload(file, oncomplete) {
      const xhr = new XMLHttpRequest();
      xhr.onload = function () {
        const resp = JSON.parse(xhr.responseText);
        oncomplete(resp);
      }
      const formData = new FormData();
      formData.append('file', file);
      xhr.upload.onprogress = (e) => {
        console.log(e);
        // e下面有loaded属性为已经上传了多少数据，total为上传文件的总进度
        changeProgress(Math.floor(e.loaded / e.total * 100));
      };
      xhr.open("POST", "/local-api/file/singleFileUpload", true);
      xhr.send(formData);
    }

    function oncomplete(resp) {
      console.log(resp);
      uploadArea.classList.replace("status-1", "status-2");
      document.querySelector(".img-proview").setAttribute("style", `background-image: url("/local-api/${resp.data.src.replaceAll("\\", "/")}");`);
    }

    function closeCurrentImg(){
      uploadArea.classList.replace("status-2", "status-0");
      document.querySelector("#uploadFile").files = [];
    }
  </script>
</body>

</html>

3.后端代码

后端使用egg写的，话说tegg出来之后我是第一次用，而且看了文档之后还是懵逼，摸索了好几个小时才差不多搞懂了写法（我觉得还不是正规军）。唉
对应的后端代码

苏小邪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap File Input，最好用的文件上传组件
沉默王二
01-29 24万+
本篇介绍如何使用bootstrap fileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。
Vue3 组件封装——文件上传
Skybububu的博客
06-10 5935
new 一个 FileReader 实例，并调用 readAsDataURL 方法传入参数 file 来读取选中的图像文件，最后在 onload 事件中，获取到成功读取的文件内容。最后插入一个 img 节点设置 src = reader.result显示选中的图片
vue3专栏项目 -- 六、上传组件（上）
m0_64931189的博客
05-15 1014
我们的template中有button和file类型的input（给隐藏input），然后我们是通过点击这个button去触发该input的click点击事件，这个点击事件就会弹出让你选择文件的弹窗。然后此时input在变化即change，说明此时在上传文件，那么我们就给个change事件，这个事件是上传的重点在这个change事件中，我们要做的流程就是：获取上传的文件-->建表单数据-->发起请求，把选择的文件传给对应API。
ElementUI文件上传组件，表单数据和文件一起提交，以及对象转form表单，对象的拷贝
m0_49194578的博客
05-31 1万+
需要将表单的参数和文件一次性提交 大概流程就是 1，关闭表单的自动提交， 2，自定义提交方法，在其中把inputstream中的文件取出来，或者你可以使用其他钩子，单反能有file文件的都行，当然这个是最方便的，至于文件，你可以勇一个变量接文件，也可以事先把放在变量里，在这里取出来直接就放进去了 3，将数据对象转为表单数据，可以循环取，也可以一个一个put 4，发起axios请求提交表单 核心就是阻断组件自己的提交流程，把数据取出加入到自己的中一并提交 表单部分 自定义的提交函数 我们真正执行表单
前端vue elementUI upload上传组件封装&多文件上传&进度条，后端servlet request.getPart()接收文件信息
web_houzhanguo的博客
06-18 6694
选中多个文件上传通过axios请求方法监听on-success用这两个钩子函数实现进度条 下面有对应的函数。本文是每个文件一个请求上传也可以用一个请求上传多个文件，需要将文件遍历添加到form表单中，后端用获取集合，有需要的可以改造一下。
Bootstrap文件上传组件之bootstrap fileinput
11-27
前两天做一个excel导入的功能，前端使用原始的input type=’file’这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源，那么社区肯定有很多关于它的组件，肯定也有这种常见...
.Net学习笔记之Layui多图片上传功能
10-16
总结来说，Layui的多图片上传功能在.NET环境中可以通过前端的Layui上传组件结合后端的文件处理逻辑来实现。前端主要负责用户交互和文件预览，后端则负责接收和保存文件。通过这样的组合，可以轻松地在.NET项目中添加...
springmvc学习笔记-前端控制器、上传、异常、开发心得小结等.zip
05-10
本学习笔记将涵盖前端控制器、文件上传、异常处理以及开发过程中的心得小结。 1. **前端控制器（DispatcherServlet）** 前端控制器是SpringMVC的核心组件，负责接收所有HTTP请求，然后根据请求的类型和映射规则...
jx-ocr前端开发笔记
最新发布
05-31
【描述】"jx_ocr前端开发笔记jx_ocr前端开发笔记jx_ocr前端开发笔记"的重复描述可能是强调笔记内容的重点，即深入理解并实践jx_ocr的前端实现。这可能包括项目的架构设计、组件开发、数据处理、用户交互以及性能优化...
通用上传文件.zip
05-24
它简化了与服务器端的通信，提供了文件上传进度反馈等功能，使得前端与后端的交互更加流畅。 `common.js`通常包含了一些公共的JavaScript函数和变量，这些代码可能被多个页面共享，例如处理全局的事件绑定、数据...
目前主流的几款文件上传控件，以及优缺点
凉梦的博客
02-11 7418
1，element-UI上传插件 优点： 1，界面美观，功能齐全 2， 缺点： https://element.eleme.cn/#/zh-CN/component/upload#shou-dong-shang-chuan 2，WebUploader 官网：http://fex.baidu.com/webuploader/getting-started.html API：http://fex.baidu.com/webuploader/doc/index.html 是由Baidu WebFE(FEX)团队开
JS - 文件上传组件WebUploader使用详解1（带进度的文件上传
热门推荐
weixin_44975322的博客
11-28 1万+
一、基本介绍 1，什么是 WebUploader？ WebUploader 是由百度公司团队开发的一个以 HTML5 为主，FLASH 为辅的现代文件上传组件。 官网地址：http://fex.baidu.com/webuploader/ 2，功能特点 分片、并发：WebUploader 采用大文件分片并发上传，极大的提高了文件上传效率。 预览、压缩：WebUploader 支持常用图片格式 jpg,jpeg,gif,bmp,png 预览与压缩，节省网络数据传输。 多途径添加文件：支持文件多选，类型过滤
文件上传组件(FileUpload）
qq_56348427的博客
07-15 716
index1.tsx import React, {useEffect, useState} from 'react'; import {Button, message, Space, Upload} from 'antd'; import {DraggerProps} from 'antd/lib/upload'; import {UploadOutlined} from '@ant-design/icons'; import {getToken} from '@/utils'; import {g
基于el-upload实现文件上传组件封装以及细节处理
qq_52569656的博客
10-17 2250
本文技术栈基于Vue2+ElementUi+Axios+Less文件上传在日常开发中也是非常常见，本文会基于实际项目的需求从0到1手把手带你基于el-upload封装一个文件上传组件，同时介绍一些需要注意的细节...
【原生js】前端文件上传解决方案总结
weixin_43655896的博客
04-18 9067
文件上传缩略图，上传进度条，文件断点续传等
web前端文件上传可选择的4种方式
jimojianghu的专栏
11-23 1万+
本文总结了前端web当前能够添加读取文件的4种方式，如果我们需要开发一个比较完善的图片上传组件，那么可能需要点击、拖拽、粘贴多种功能，这就需要使用到前三种文件读取方式。文件系统访问API鉴于兼容性还有待提升，我们可以作为后备的方案使用。有了文件读取的方式，那我们要完成上传功能，就可以使用HTML表单提交，或者FormData对象上传了。
文件上传组件
fansfanfan的博客
12-15 1786
项目中经常要用到文件上传，下面是一个封装好的文件上传的组件，重要的部分添加了相应的备注。 <template> <div class="uploadExcel"> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick" &gt
ExtJS-文件上传组件-FileUpload
重庆熊猫
08-24 416
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 转载请注明出处:https://www.cnblogs.com/cqpanda/p/17653469.html 更新记录 2023年8月24日 从代码迁移到博客。 完整源代码：https://gitee.com/panda666plus/ext-js-file-upload-c...
有道云笔记可以上传xmind文件吗
05-14
有道云笔记支持上传XMind文件，你可以将XMind文件保存为.xmind格式，然后在有道云笔记中上传该文件。具体操作可以参考以下步骤： 1. 在有道云笔记中创建一个新的笔记本或打开一个已有的笔记本。 2. 在笔记本中选中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值