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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
jquery滚动特效集锦
Jun 03 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
Vue声明式渲染详解
May 17 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 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笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python实现猜单词小游戏
2020/05/22 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python实现飞机大战项目
2020/03/11 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
行政助理工作职责范本
2014/03/04 职场文书
汽车广告策划方案
2014/05/31 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
预备党员介绍人意见
2015/06/01 职场文书
青年联谊会致辞
2015/07/31 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python