小工具      在线工具  汉语词典  css  js  c++  java

zyupload组件上传文件

# 组件库,组件,文件上传,java 额外说明

收录于:152天前

文件上传是Web开发的重要组成部分。传统的文件上传有以下几种场景:

在这里插入图片描述

更多文件上传请移步文件上传,了解这8个场景就够了感谢作者@奇舞周刊

这里只简单叙述拖拽和多文件上传方式,使用的组件是上传

在这里插入图片描述

实现文件上传数据是用字符流二进制的形式,如下:在这里插入图片描述

上传组件的使用:

<div id="zyupload" class="zyupload"></div>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
    
        // 初始化插件
        $("#zyupload").zyUpload({
    
            width: "650px",                 // 宽度
            height: "400px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "api/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {
        // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
                console.info("当前选择了以下文件:");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {
                  // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
                console.info("当前删除了此文件:");
                console.info(file.name);
            },
            onSuccess: function (file, response) {
              // 文件上传成功的回调方法
                console.info("此文件上传成功:");
                console.info(file.name);
                console.info("此文件上传到服务器地址:");
                console.info(response);
                $("#uploadInf").append("<p>上传成功,文件地址是:" + response + "</p>");
            },
            onFailure: function (file, response) {
              // 文件上传失败的回调方法
                console.info("此文件上传失败:");
                console.info(file.name);
            },
            onComplete: function (response) {
               	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });

    });
</script>

后台接口:

@Controller
@RequestMapping("/api")
public class FileUpLaodController {
    
    @CrossOrigin
    @ResponseBody
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    public String fileUpload(@RequestParam MultipartFile file) throws IOException {
    
        if(file.isEmpty()){
    
            return "上传失败!";
        }
        else {
    
            byte[] bytes = file.getBytes();
            Path path = Paths.get("C:\\Users\\fireapproval\\Desktop\\毕业设计\\数据集\\"+file.getOriginalFilename());
            Files.write(path,bytes);
// FileWriter fileWriter = new FileWriter(new File("C:\\Users\\fireapproval\\Desktop\\毕业设计\\数据集\\"+file.getOriginalFilename()));
// fileWriter.close();
        }
        return "C:\\Users\\fireapproval\\Desktop\\毕业设计\\数据集";
    }
}

MultipartFile是Spring上传文件的封装类。它包含文件的二进制流和文件属性等信息。该文件可以是图片。

The field file exceeds its maximum permitted size of 1048576 bytes

写完前后代码后上传文件时可能会出现上述错误。这是因为spring boot默认限制最大单个文件的大小为1048576字节。

spring.servlet.multipart.max-file-size = 100MB  //最大文件大小
spring.servlet.multipart.max-request-size=100MB    //最大请求数量

根据 Spring Boot 版本的不同,配置可能会有所不同。这里是spring boot 2.7.1版本。

另外值得注意的是文件的写入部分:

  1. 修改传入文件的地址

在这里插入图片描述

  1. 注意@CrossOrigin解决跨域问题

  2. 写入文件方法及文件路径

byte[] bytes = file.getBytes();

//方法一:
Path path = Paths.get("C:\\Users\\_xiaoxu_\\数据集\\"+file.getOriginalFilename());
Files.write(path,bytes);

//方法二:
FileWriter fileWriter = new FileWriter(new File("C:\\Users\\_xiaoxu_\\数据集\\"+file.getOriginalFilename()));
fileWriter.close();

如下图所示上传成功:
在这里插入图片描述

. . .

相关推荐

额外说明

如果后端实现pdfjs来预览PDF文件

 PDF.js用于解析和呈现PDF 的通用、基于 Web 标准的平台。 官网地址:http://mozilla.github.io/pdf.js/ 目录 一、下载pdfjs安装包 (1)官网下载  (2)网盘下载

额外说明

jstack定位cpu高的java代码

先用 ps -ef | grep xx.jar 来定位到进程id 然后top -p 进程id 这时这个进程cpu高 然后按shift + H 找到可能的线程id 将上面的线程id 7592 转成16进制 #printf %x 7592 && echo 打

额外说明

MPLAB X IDE 安装黑色主题

下载黑色主题插件 http://plugins.netbeans.org/plugin/62424/darcula-laf-for-netbeans 本地下载 下载得到:1501524971_nb-darcula-1.6.nbm 在MPLAB X 中to

额外说明

全网最全Fiddler攻略,十分钟了解Fiddler抓包

序章 Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、 编辑、转存等操作。也可以用来检测网络安全。反正好处多多,举之不尽呀!当年学习的 时候也蛮费劲,一些蛮实用隐藏的小功能用了之后就忘记了,每次去网站上找也很麻烦,

额外说明

Web之浮动框架篇

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动框架的应用</title> <style type="text/css"> /* margin为外面距的距离 */ a{wid

额外说明

Java 网络编程详解:实现网络通信的核心技术

本文目录 1. 网络编程概述 2. TCP/IP协议 3. Socket编程模型 4.注意事项 5.总结 1. 网络编程概述 网络编程是指利用计算机网络进行数据交换和通信的过程。它涉及到在不同主机之间传输数据,并允许不同设备之间进行连接和通信。网络编程不

额外说明

SpringCloud分布式微服务中采用LCN解决分布式事物

一、分布式事务产生的背景 在微服务环境下,会根据不同的业务会拆分成不同的服务,每个服务都有自己独立的数据库,服务与服务之间采用RPC远程调用进行通信,但在每个服务中都有自己独立的本地事务。当服务相互通讯的时候,两个本地事务互不影响,从而需要分布式事务。

额外说明

easyexcel 简介、中文文档、中英对照文档 下载

easyexcel 文档 下载链接(含jar包、源码、pom) 组件名称 中文-文档-下载链接 中英对照-文档-下载链接 easyexcel-3.0.5.jar easyexcel-3.0.5-API文档-中文版.zip easyexcel-3.0.5-

额外说明

bean named 'entityManagerFactory' that could not be found错误及解决

问题: 在Eclipse下报如下错误:bean named ‘entityManagerFactory’ that could not be found。 发生场景: 导入JPA依赖包后, 在Service中使用EntityManager 操作数据库,容

额外说明

全面了解SpringBoot拦截器

在本文中,我们将详细介绍SpringBoot中的拦截器,包括拦截器的概念、作用、实现方式、执行顺序、生命周期以及高级应用。最后,我们还将探讨拦截器的性能优化策略和常见问题。 1. 拦截器的概念和作用 1.1 什么是拦截器 拦截器(Interceptor)

ads via 小工具