java springmvc 使用Web Uploader 上传单张图片

今天小组长让我完成一个图片上传的功能，并丢给了我一个百度上传的插件 WebUpload 。由于是第一次使用该插件，所以先在本地弄了个小demo，其间踩了几个坑，写出来让大家有需要的也看下。

引入所需要的资源

先去 http://fex.baidu.com/webuploader/ 下载好所需要的资源并放到项目中
然后在 jsp 中引入资源，在这一并把 jQuery 的资源也引进来。

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/webuploader-0.1.5/webuploader.js"></script>

要对 filePicker 进行样式调整，不然可能你点了选择图片按钮没有任何效果出来！！！我就在这卡了不少时间

<!-- 加这个是解决选择图片按钮不可选的情况 ，其中百分之多少自己调吧-->
<style>#filePicker div:nth-child(2){width:10%!important;height:100%!important;}
</style>

html 代码如下（直接从上面那个网站复制过来的）。

<!--dom结构部分--><div id="uploader-demo"><!--用来存放item--><div id="fileList" class="uploader-list"></div><div id="upInfo" ></div><div id="filePicker" >选择图片</div></div><input type="button" id="btn" value="开始上传">

以下是 js 代码，供大家复制使用。其中有几个点需要注意
1：swf 文件的路径要写对；
2：server：我写的是 springmvc 的后台的访问路径，这个 controller 我也在下面贴代码了；
3：accept：是对应的上传的类型，本次 demo 上传的是图片，所以写图片的类型；
4：auto：自动上传设置了 false ，让他点击开始上传的时候才真正上传，以免手误选错图片。
5：$list.empty(); 在添加新的图片进来的时候写这个是因为本次 demo 是只支持上传单张图片的，加了这个，每次重新选择图片的时候，我就清空一次缩略图的列表，那下次新增进来之后缩略图就只显示一张图片，不然的话就会把之前选错的图片也显示在上面了。
6：文件上传成功的时候，后台返回的 response 到这里会变成一个对象，要写 response._raw 才能拿到 string 类型的返回值。
7：每次文件加入队列前 uploader.reset(); uploader.refresh(); 把队列给清了。

<script>
jQuery(function() {var $ = jQuery,$list = $('#fileList'),// 优化retinaratio = window.devicePixelRatio || 1,// 缩略图大小thumbnailWidth = 100 * ratio,thumbnailHeight = 100 * ratio,// Web Uploader实例uploader;// 初始化Web Uploaderuploader = WebUploader.create({// 自动上传。auto: false,// swf文件路径swf:'${pageContext.request.contextPath}/webuploader-0.1.5/Uploader.swf',// 文件接收服务端。server: 'http://localhost:8080/uploader.action',fileNumLimit:'1',  //文件总数量只能选择1个 // 选择文件的按钮。可选。pick: {id:'#filePicker',  //选择文件的按钮multiple:false, label: '点击选择图片'},   // 图片质量，只有type为`image/jpeg`的时候才有效。quality: 90,//限制传输文件类型，accept可以不写 accept: {title: 'Images',//描述extensions: 'gif,jpg,jpeg,png',//类型mimeTypes: '.gif,.jpg,.jpeg,.png'//mime类型}});// 当有文件添加进来的时候，创建img显示缩略图使用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为容器jQuery实例$list.empty();$list.append( $li );// 创建缩略图// 如果为非图片文件，可以不用调用此方法。// thumbnailWidth x thumbnailHeight 为 100 x 100uploader.makeThumb( file, function( error, src ) {if ( error ) {$img.replaceWith('<span>不能预览</span>');return;}$img.attr( 'src', src );}, thumbnailWidth, thumbnailHeight );});// 文件上传过程中创建进度条实时显示。    uploadProgress事件：上传过程中触发，携带上传进度。 file文件对象 percentage传输进度 Nuber类型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, 用样式标记上传成功。 file：文件对象，response：服务器返回数据uploader.on( 'uploadSuccess', function( file,response) {$( '#'+file.id ).addClass('upload-state-done');//console.info(response);$("#upInfo").html("<font id='imgPath' color='red'>"+response._raw+"</font>");alert("上传成功");});// 文件上传失败                                file:文件对象 ， code：出错代码uploader.on( 'uploadError', function(file,code) {var $li = $( '#'+file.id ),$error = $li.find('div.error');// 避免重复创建if ( !$error.length ) {$error = $('<div class="error"></div>').appendTo( $li );}$error.text('上传失败! ');});// 不管成功或者失败，文件上传完成时触发。 file： 文件对象uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').remove();});// 所有文件上传成功后调用        uploader.on('uploadFinished', function () {//清空队列uploader.reset();});//只允许上传一个，每次文件加入队列前触发uploader.on('beforeFileQueued',function(){uploader.reset();uploader.refresh();});//绑定提交事件$("#btn").click(function() {console.log("上传...");uploader.upload();   //执行手动提交});});
</script>

以下是 java 代码
首先先到 springmvc.xml 中加个

<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding"><value>UTF-8</value></property><!-- set the max upload size100MB -->  <property name="maxUploadSize">  <value>104857600</value>  </property>  <property name="maxInMemorySize">  <value>4096</value>  </property>  </bean>

以下是 controller 层代码，因为是小 demo，所以就不写 service 层了，直接在这搞好算了
我在这里做的事情：把图片放到特定的文件夹中，图片名字加上当前毫秒数，以免重名。最后返回图片所在的位置给前端，便于以后对其进行下一步的操作。

要注意的点：
1：写上 produces=”text/html;charset=UTF-8” ，不然的话，当上传的图片名字带有中文，当返回数据给前端的时候，会显示乱码

@RequestMapping(value="uploader" , produces="text/html;charset=UTF-8")@ResponseBodypublic String upload(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {System.out.println("收到图片!");MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request;Map<String, MultipartFile> files = Murequest.getFileMap();// 得到文件map对象String upaloadUrl = "e:"+ File.separator + "upload"+File.separator;// 得到当前工程路径拼接上文件名System.out.println(upaloadUrl);File dir = new File(upaloadUrl);if (!dir.exists())// 目录不存在则创建dir.mkdirs();String tagetFileName = "";for (MultipartFile file : files.values()) {String fileName = file.getOriginalFilename();tagetFileName = upaloadUrl + System.currentTimeMillis()+ fileName;File tagetFile = new File(tagetFileName);// 创建文件对象if (!tagetFile.exists()) {// 文件名不存在 则新建文件，并将文件复制到新建文件中try {tagetFile.createNewFile();} catch (IOException e) {e.printStackTrace();}try {file.transferTo(tagetFile);} catch (IllegalStateException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}}}System.out.println("接收完毕");return tagetFileName;}

最后小 demo 的效果如下
然后我将会在下一篇的博文中写从后台获取图片然后显示在前端，也就是点展示图片的功能。
展示图片的传送门： https://blog.csdn.net/weixin_43006337/article/details/82055898

百度上传插件 Web Uploader 使用之单图片上传相关推荐

php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
java ajax多文件上传插件_jQuery Upload File 多文件批量上传插件 - 资源
jQuery File UPload 包含多个带有进度条的文件上传,能够兼容任意的服务端语言,例如 PHP.Python.Ruby on Rails.Java等,支持标准的HTML表单文件上传.jQu ...
php图片批量上传插件下载,jQuery的多图片批量上传插件
jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...
java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
php单图上传并预览,JavaScript实现单图片上传并预览功能
本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码,供大家参考,具体内容如下单图片上传并实现预览 /*上传图片*/ .addPerson{ line-height: 190p ...
mac系统上idea插件下载不下来或安装不上怎么办
idea上很多插件,不过大部分要翻墙去下我本人为了下lombok很是下了一番功夫,每次都显示超时,不能下载有几种办法可以尝试 1.配置代理之前下"阿里规约"的时候这个方法非常 ...
ssm 上传图片到mysql_ssm(Spring+Spring MVC+MyBatis)+Web Uploader开发图片文件上传实例,支持批量上传,拖拽上传,复制粘贴上传...
项目描述 ssm开发一个上传图片的项目用百度的插件 Web Uploader 上传,不会的去它的官网找API文档官网的API文档还是比较坑的.... 百度插件 Web Uploader 上传文 ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
从实战中学前端：打造自己的 html5 文件上传插件
文件上传初体验  <input type="file" id="logo" name=&qu ...

百度上传插件 Web Uploader 使用之单图片上传

java springmvc 使用Web Uploader 上传单张图片

引入所需要的资源

百度上传插件 Web Uploader 使用之单图片上传相关推荐

最新文章

热门文章