Web uploader上传word，pdf实例

看了许多，终于自己做了一个。废话不说，直接上代码

html部分

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

js部分

//初始化Web Uploadervar uploader = WebUploader.create({auto: false,                                         //自动上传swf: '/css/js/plugins/webuploader/Uploader.swf',     // swf文件路径server: '/xxxx/upload/xxxxx',                    // 文件接收服务端。pick: '#picker',                                     // 选择文件的按钮。可选。accept: {  title: 'Files',  extensions: 'pdf,doc,docx',mimeTypes: 'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'  +',application/pdf'  },fileNumLimit: 10,                              //最大上传数量为10fileSingleSizeLimit: 20 * 1024 * 1024,         //限制上传单个文件大小20MfileSizeLimit: 200 * 1024 * 1024,              //限制上传所有文件大小200Mresize: false                                  // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！});//上传前的判断处理uploader.on('error', function( type ){if ( type === 'Q_EXCEED_NUM_LIMIT' ) {layer.msg('最多允许上传10份xxx');} if ( type === 'F_DUPLICATE' ) {layer.msg('xxx重复，不能上传！');}if (type=="Q_TYPE_DENIED"){layer.msg("请上传doc、pdf格式文件");}else if(type=="F_EXCEED_SIZE"){layer.msg("文件大小不能超过20M");}});// 当有文件被添加进队列的时候var $list = $("#uploader");uploader.on( 'fileQueued', function( file ) {$list.append( '<div id="' + file.id + '" class="item">' +'<h4 class="info">' + file.name + '</h4>' +'<p class="state">等待上传...</p>' + '<a class="webuploadDelbtn">删除</a><br/>' +'</div>' );});//点击开始上传$("#ctlBtn").on( 'click', function() {  uploader.upload();  });// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress .progress-bar');// 避免重复创建if ( !$percent.length ) {$percent = $('<div class="progress progress-striped active">' +'<div class="progress-bar" role="progressbar" style="width: 0%">' +'</div>' +'</div>').appendTo( $li ).find('.progress-bar');}$li.find('p.state').text('上传中');$percent.css( 'width', percentage * 100 + '%' );});//文件成功、失败处理uploader.on( 'uploadSuccess', function( file ) {$( '#'+file.id ).find('p.state').text('已上传');$( '#'+file.id ).find('a.webuploadDelbtn').remove();});//上传错误uploader.on( 'uploadError', function( file ) {$( '#'+file.id ).find('p.state').text('上传出错');});//上传完成uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').fadeOut();});//删除$list.on("click", ".webuploadDelbtn", function () {var $ele = $(this);var id = $ele.parent().attr("id");var file = uploader.getFile(id);uploader.removeFile(file,true);  }); //删除时执行的方法uploader.on('fileDequeued', function (file) {$(file.id).remove();$('#'+file.id ).find('span.state').text('已经取消');$('#'+file.id).hide();   console.log("remove");     });

java 后台

    @RequestMapping("/xxx")@ResponseBodypublic void uploaderResumes(@RequestParam("file") MultipartFile file, HttpServletRequest request) {  // 判断文件是否为空  if (!file.isEmpty()) {  try {  // 文件保存路径  String filePath = request.getSession().getServletContext().getRealPath("/") + "upload" + System.getProperty("file.separator") + file.getOriginalFilename();  // 转存文件  file.transferTo(new File(filePath));  } catch (Exception e) {  e.printStackTrace();  }  }  }

图片

Web uploader上传word，pdf实例相关推荐

my97显示服务器时间,封装Web Uploader 上传插件、My97DatePicker、百度编辑器的使用 (ASP.NET MVC)...
Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...
Java web/springboot上传word/doc/docx文档(含图片)与HTML富文本导入/导出互相转换解析！附项目源码
测试效果先看下效果文档内容如下: 上传上传docx文档查看解析内容 <html><head><style>p{margin-top:0pt;margin-b ...
php webuploader大文件,web uploader 上传大文件总结
由于业务需要,需要上传大文件,已有的版本无法处理IE版本,经过调研,百度的 webuploader 支持 IE 浏览器,而且支持计算MD5值,进而可以实现秒传的功能. 大文件上传主要分为三部分,预上传 ...
java 图片上传_java web图片上传和文件上传实例
本篇文章主要介绍了java web图片上传和文件上传实例,具有一定的参考价值,有需要的可以了解一下. 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多 ...
java web文件上传详解_java web图片上传和文件上传实例详解
java web图片上传和文件上传图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定 ...
web文件上传（一）--文件上传与json上传区别及方法
Web文件上传方法总结大全上传文件与与上传数据区别上传数据主要指json等简单字符串,上传文件指的是上传word.excel图片等.在上传数据的时候enctype默认为第一个application ...
iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门
iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门文章目录 iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门 PDF报表入门 3 ...
前后端分离微服务管理系统项目实战SaaS-HRM项目(九)——文件上传与PDF报表入门
文章目录九.文件上传与PDF报表入门 1.图片上传 <1>.Data URL (1).概述 (2).入门 (3).基本原理 (4).优缺点分析 <2>.实现用户头像上传 2. ...
php如何word转html格式文件,PHP将上传word文件，转化为Html格式，(多种转换方式)
标签:主机 git not __name__ sts offic write otto ice 方法一: 通过PHPOffice(推荐) 1: composer req ...

Web uploader上传word，pdf实例

Web uploader上传word，pdf实例相关推荐

最新文章

热门文章