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插件文件上传实现
最新推荐文章于 2022-09-15 15:13:09 发布