java文件分片上传

最新推荐文章于 2025-07-11 12:11:05 发布

置顶

程序员小宋

最新推荐文章于 2025-07-11 12:11:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/qq_41695498/article/details/112237010

前端部分

前端页面代码如下，只需要修改自己的文件上传地址接口地址：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
         Web Uploader
    </title>
        <link rel="shortcut icon" href="http://fex.baidu.com/webuploader/images/favicon.ico">
        <link rel="stylesheet" type="text/css" href="js/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="js/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="js/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="js/syntax.css">
        <link rel="stylesheet" type="text/css" href="js/style.css">
        <link rel="stylesheet" type="text/css" href="js/webuploader.css">
        <link rel="stylesheet" type="text/css" href="js/demo.css">
</head>

<body>
<div id="wrapper">
    <div class="page-body">
        <div id="post-container" class="container">
            <div class="page-container">
                <h1 id="demo">Demo</h1>
                    <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮</p>
                <div id="uploader" class="wu-example">
                    <div class="queueList">
                        <div id="dndArea" class="placeholder">
                            <div id="filePicker" class="webuploader-container">
                                <div class="webuploader-pick">点击选择图片</div>
                                <div id="rt_rt_1ctrotb75hv81prnco2vi318qc1" style="position: absolute; top: 0px; left: 448px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
                                    <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
                                </div>
                            </div>
                            <p>或将照片拖到这里，单次最多可选300张</p>
                        </div>
                        <ul class="filelist"></ul>
                    </div>
                    <div class="statusBar" style="display:none;">
                        <div class="progress" style="display: none;">
                            <span class="text">0%</span>
                            <span class="percentage" style="width: 0%;"></span>
                        </div><div class="info">共0张（0B），已上传0张</div>
                        <div class="btns">
                            <div id="filePicker2" class="webuploader-container"><div class="webuploader-pick">继续添加</div><div id="rt_rt_1ctrotb7j4opkv31e231b79k0a6" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div><div class="uploadBtn state-pedding">开始上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</div>
    <script type="text/javascript">
        var BASE_URL = '/webuploader';
    </script>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/global.js"></script>   
    <script type="text/javascript" src="js/webuploader.js"></script>    
    <script type="text/javascript" src="js/demo.js"></script>
</body>
</html>

前端js代码 demo.js，需要修改插件初始化的参数，和文件上传成功后的合并通知的地址。

jQuery(function() {
   
   
    var $ = jQuery,    // just in case. Make sure it's not an other libaray.
        $wrap = $('#uploader'),
        // 图片容器
        $queue = $('<ul class="filelist"></ul>')