zyupload上传实例

最新推荐文章于 2023-02-19 00:30:42 发布

缘不易

最新推荐文章于 2023-02-19 00:30:42 发布

阅读量2.1k

点赞数 1

分类专栏： springboot html5 文章标签： html

本文链接：https://blog.csdn.net/qq_45834006/article/details/108240721

版权

springboot 同时被 2 个专栏收录

86 篇文章 2 订阅

订阅专栏

html5

9 篇文章 0 订阅

订阅专栏

控制器：

package com.exam.controller;

import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.UUID;

/**
 * @author 19417
 */
@RestController
public class FileController {
    private final String filepathDir = "F:\\exam\\src\\main\\resources\\static\\images\\";

    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
        //旧的文件名称
        String oldfilename = file.getOriginalFilename();
        //获取文件扩展名
        String extname = oldfilename.substring(file.getOriginalFilename().lastIndexOf("."));

        //防止重名
        String newfliename = UUID.randomUUID().toString() + extname;
        //返回是整个文件的大小
        String savepath = filepathDir + newfliename;
        File file1 = new File(savepath);
        if(!file1.exists()){
            file1.createNewFile();
        }
        Integer n= FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(new File(savepath)));
        long size = file.getSize();
        if(n!=size){
            return "文件上传失败！";
        }else {
            return savepath;
        }


    }
}

页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zyupload上传实例</title>
    <link rel="stylesheet" href="lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="zyupload" class="zyupload"></div>

    </div>
</div>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="js/glubo.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: httpurl+"/files/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe","doc","docx"],// 上传文件的类型
            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>

</body>
</html>

配置信息：


        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "400px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "api/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe",doc,docx],// 上传文件的类型
            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);
            }
        });

在这里插入图片描述

下载地址

缘不易

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
zyupload上传实例

页面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>zyupload上传实例</title> <link rel="stylesheet" href="lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all"></head><
复制链接

扫一扫