webuploader 实现大文件分片上传

最新推荐文章于 2025-06-14 17:37:30 发布

原创

最新推荐文章于 2025-06-14 17:37:30 发布 · 1.1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #大文件上传

本文介绍了如何利用JavaScript插件WebUploader实现实现大文件的分片上传，并提供了HTML初始化及PHP后台处理代码的示例。通过分片上传，可以有效处理大文件上传的效率和稳定性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webuploader 分片上传文件

最近研究了下大文件上传的方法，找到了webuploader js 插件进行大文件上传。

使用

 使用webuploader分成简单直选要引入

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

HTML部分

<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传            </button>
    </div>
    </div>

初始化Web Uploader

jQuery(function() {
   
   
        $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            uploader;

        uploader = WebUploader.create({
            // 不压缩image
            resize: false,
            // swf文件路径
            swf: 'uploader.swf',
            // 文件接收服务端。
            server: upload.php,
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            chunked: true,
            chunkSize:2*1024*1024,
            auto: true,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,b