webuploader实现上传图片到服务器功能


Posted in Javascript onAugust 16, 2018

本文为大家分享了webuploader实现上传图片到服务器的具体代码,供大家参考,具体内容如下

效果图:

webuploader实现上传图片到服务器功能

一、引入资源文件

1.1 引入webuploader.css文件

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="../../css/plugins/webuploader/webuploader.css" >

1.2 引入webuploader.min.js文件

<!--引入JS-->
<script type="text/javascript" src="../../js/plugins/webuploader/webuploader.min.js"></script>

二、HTML代码

<div class = "row">
 <div class="btns col-sm-2">
  <div id="picker">选择文件</div>
  <button id="ctlBtn" class="btn default-btn">开始上传</button>
 </div>
 <!--用来存放文件信息-->
 <div id="thelist" class="uploader-list col-sm-10"></div>
</div>

三、JavaScript代码

<script type="text/javascript">
  $(function(){
   var uploader = WebUploader.create({
    // 选完文件后,是否自动上传。
    auto: false,
    // 文件接收服务端。
     server: '/common/webupload_pic',
     // 选择文件的按钮。可选。
     // 内部根据当前运行是创建,可能是input元素,也可能是flash.
     pick: '#picker',
     // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
     resize: false,
     // 只允许选择图片文件。
     accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
     },
     /* fileSizeLimit :10, //验证文件总大小是否超出限制, 超出则不允许加入队列
     fileSingleSizeLimit :10,   //验证单个文件大小是否超出限制, 超出则不允许加入队列。 */
     duplicate :true //去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.

    });


  // 当文件被加入队列之前触发,此事件的handler返回值为false,则此文件不会被添加进入队列。
   uploader.on( 'beforeFileQueued', function( file ) {
    // 限制图片数量
    img_length = $("#thelist img").length;
    if (img_length >= 6) {
    layer.msg("图片最多上传6张");
    return false;
    }

   });

  // 当有文件添加进来的时候
   uploader.on( 'fileQueued', function( file ) {
   var $li = $(
      '<div id="' + file.id + '" class="file-item thumbnail col-sm-3" style="width:150px;margin-left:10px;">' +
       '<img>' +
       '<div class="info">' + file.name + '</div>' +
       '<span style="margin-left: 78%;cursor:pointer;" onclick="deleteFile(this)">删除</span>' +
      '</div>'
      ),
     $img = $li.find('img');
    // $list为容器jQuery实例
    $("#thelist").append( $li );
    // 创建缩略图
    // 如果为非图片文件,可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
     if ( error ) {
      $img.replaceWith('<span>不能预览</span>');
      return;
     }
     $img.attr( 'src', src );
    }, 150, 150 );

   });

  // 文件上传成功,给item添加成功class, 用样式标记上传成功。
   uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).addClass('upload-state-done');
    var $li = $( '#'+file.id ),
     $done = $li.find('div.upload-state-done');
    // 避免重复创建
    if ( !$done.length ) {
    $done = $('<div class=""></div>').appendTo( $li );
    }
    $done.html('<font color="blue">上传成功</font>');
   });

  // 文件上传失败,显示上传出错。
   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.html('<font color="red">上传失败</font>');
   });

   $("#ctlBtn").click(function(){
    uploader.upload();
   })

  })

  function deleteFile(obj) {
   $(obj).parent().remove();
  }
</script>

四、java代码

/**
  *
  * @Title: webuploadPic
  * @Description: webupload插件上传图片
  * @author: 大都督
  * @param files
  * @return
  * @throws IOException
  * @return: MessageInfo
  */
  @RequestMapping("/webupload_pic")
  @ResponseBody
  public MessageInfo webuploadPic(HttpServletRequest request) throws IOException {
   MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
   Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
   List<String> file_url_list = Lists.newArrayList();
   for (MultipartFile file:fileMap.values()) {
    file_url_list.add("/pictures/"+FileUtil.uploadFile(file, pictures_url));
   }
   return ResultGenerator.genSuccessResult(file_url_list);
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
vue-cli构建项目使用 less的方法
Oct 04 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 #Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 #Javascript
深入理解Vue 组件之间传值
Aug 16 #Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 #Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 #Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 #Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 #Javascript
You might like
php解析xml方法实例详解
2015/05/12 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
php数据序列化测试实例详解
2017/08/12 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
tab栏切换原理
2017/03/22 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
js实现每日签到功能
2018/11/29 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
python3中zip()函数使用详解
2018/06/29 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
小学生植树节活动总结
2014/07/04 职场文书
广播体操比赛主持词
2015/06/29 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang