webuploader 上传文件可删除的

最新推荐文章于 2023-02-16 09:37:47 发布

原创最新推荐文章于 2023-02-16 09:37:47 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

spring boot 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用WebUploader实现的单文件上传功能，允许新上传的文件覆盖之前的文件。通过HTML和JavaScript代码演示了如何设置文件上传界面及事件监听器，包括文件排队、上传进度、上传成功与失败等状态。

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

* 实现效果:*
* 单个文件上传的文件可以覆盖上次的文件*

1 .html 样式

<div class="uploader-demo">
    <!--用来存放item-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
    </div>
</div>

2 .js 代码

// 文件上传demo
    $(function () {
        var $ = jQuery,
            $list = $('#thelist'),
            // 优化retina, 在retina下这个值是2
            ratio = 1 || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // 初始化Web Uploader
            uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: '/content/plugins/webuploader/Uploader.swf',
                // 文件个数限制
                fileNumLimit: 1,
                // 文件接收服务端。
                server: getRootPath() + '/uploadFileReturnModel',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',
                formData: {
                    destDir: "fileInfo"
                },
                // 不压缩image
                resize: false
            });

        uploader.on('fileQueued', function (file) {
            $list.append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
            //console.log(file);
            var fileStatusnum = uploader.getStats();
            if (fileStatusnum.cancelNum > 0){
                // 多文件上传  列队的时候上传上个文件的样式
                $('#WU_FILE_'+(fileStatusnum.cancelNum-1)).remove();
            }
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            $('#' + file.id).find('p.state').text('已上传');
            //photoList.push(JSON.parse(response._raw));
            //$("#photo").val(JSON.stringify(photoList));
            $("#fujian").val(response._raw);
            var fileStatusnum = uploader.getStats();
            // $.fn.modalMsg("上传成功"+fileStatusnum.successNum+"个文件","success");
            $.fn.modalMsg("上传成功", "success");
            // 上传成功在缓存里上传文件
            uploader.removeFile(file);
            $('#' + file.id).addClass('upload-state-done-file');
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');

            var fileStatusnum = uploader.getStats();
            layer.msg("上传失败" + fileStatusnum.uploadFailNum + "个文件", {icon: 1, time: 1000});
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

    });