ueditor插件文件上传实现

本文详细介绍了如何使用ueditor插件进行文件上传。首先添加commons-fileupload依赖,然后配置mvc.xml文件设置最大上传大小。接着导入webuploader和ueditor所需文件,并在前端页面引入js和css。在jQuery中初始化Web Uploader,设置文件类型、上传地址等。当文件被添加、上传进度改变、上传成功或失败时,会触发相应事件。最后展示了后台Java代码处理上传,包括文件保存策略、文件上传到服务器和返回上传结果。

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

1.首先加依赖(对MultipartFile的支持)
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
2.配置mvc.xml文件

<!--文件上传-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8"/>
    <!--max size: 10M-->
    <property name="maxUploadSize" value="10485760"/>
</bean>
3.导入插件所需的问件(包含webuploader和ueditor,前者是包含于后者的)

4.在前台页面导入js,css
<link rel="stylesheet" href="/static/webuploader/css/webuploader.css"/>
<script src="/static/bootstrapValidator/dist/js/language/zh_CN.js"></script>
<script src="/static/webuploader/dist/webuploader.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        var $ = jQuery,
                $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

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

        // Web Uploader实例
                uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,

            // swf文件路径
            swf: '/static/webuploader/dist/Uploader.swf',

            // 文件接收服务端。
            server: '/back/user/uploads',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: {
                id:'#filePicker'

            },//fileval :"pic",      //fileval 后台接收的名,如果不写这个 默认为file
            // 只允许选择文件,可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');

            $list.append($li);

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功,给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败,现实上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                    $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

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

        uploader.on("uploadAccept",function(object,ret){
            //服务器响应了
            //ret._raw  类似于 data
            var data =JSON.parse(ret._raw);
            $('#imgUrl').val(data.urlUrl);
        });
}

后台java代码:
public class Upload {
    public static JsonObj upload(MultipartFile pic) throws IOException {
        JsonObj jsonObj = null;
        String url = "";
        String imgUrl = "";
        if (pic.getSize() == 0) {
            System.out.println("没有上传图片");
        } else {
            System.out.println("有图片上传");
            String filename = pic.getOriginalFilename();
            //图片生成策略 yyyyMMddHHmmssSSS+三位随机数+extension
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMddHHmmssSSS");
            String format = simpleDateFormat.format(new Date());
            for (int i = 0; i < 3; i++) {
                Random random = new Random();
                format += random.nextInt(10);  //1-9的随机数
            }

            byte[] bytes = pic.getBytes();
            Client client = new Client();
            imgUrl = format + filename;    //数据库保存使用的图片名
            System.out.println(imgUrl);
            //服务器上传地址
            url = "http://localhost:8089/img-web/upload/" + imgUrl;  //上传到其他服务器要用的url
            //通过client来获取一个resource对象
            WebResource resource = client.resource(url);
            //put发送
            resource.put(String.class, bytes);

            jsonObj = new JsonObj();
            System.out.println(url);
            jsonObj.setUrl(url);
            jsonObj.setUrlUrl(imgUrl);
        }
        return jsonObj;
    }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值