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

被折叠的 条评论
为什么被折叠?



