webupload 上传

1. css 文件


.btn-file {position: relative;overflow: hidden;vertical-align: middle;
}
.btn-file > input {position: absolute;top: 0;right: 0;width: 100%;height: 100%;margin: 0;font-size: 23px;cursor: pointer;filter: alpha(opacity=0);opacity: 0;direction: ltr;
}
.webupload {display: inline-block;margin-bottom: 9px;
}
.webupload .form-control {display: inline-block;padding-top: 7px;padding-bottom: 5px;margin-bottom: 0;vertical-align: middle;cursor: text;
}
.webupload .thumbnail {display: inline-block;margin-bottom: 5px;overflow: hidden;text-align: center;vertical-align: middle;
}
.webupload .thumbnail > img {max-height: 100%;
}
.webupload .btn {vertical-align: middle;
}
.webupload-exists .webupload-new,
.webupload-new .webupload-exists {display: none;
}
.webupload-inline .webupload-controls {display: inline;
}
.webupload-filename {display: inline-block;overflow: hidden;vertical-align: middle;
}
.form-control .webupload-filename {vertical-align: bottom;
}
.webupload.input-group {display: table;
}
.webupload.input-group > * {position: relative;z-index: 2;
}
.webupload.input-group > .btn-file {z-index: 1;
}
.webupload-new.input-group .btn-file,
.webupload-new .input-group .btn-file {border-radius: 0 4px 4px 0;
}
.webupload-new.input-group .btn-file.btn-xs,
.webupload-new .input-group .btn-file.btn-xs,
.webupload-new.input-group .btn-file.btn-sm,
.webupload-new .input-group .btn-file.btn-sm {border-radius: 0 3px 3px 0;
}
.webupload-new.input-group .btn-file.btn-lg,
.webupload-new .input-group .btn-file.btn-lg {border-radius: 0 6px 6px 0;
}
.form-group.has-warning .webupload .webupload-preview {color: #8a6d3b;
}
.form-group.has-warning .webupload .thumbnail {border-color: #faebcc;
}
.form-group.has-error .webupload .webupload-preview {color: #a94442;
}
.form-group.has-error .webupload .thumbnail {border-color: #ebccd1;
}
.form-group.has-success .webupload .webupload-preview {color: #3c763d;
}
.form-group.has-success .webupload .thumbnail {border-color: #d6e9c6;
}
.input-group-addon:not(:first-child) {border-left: 0;
}
.webupload .webuploader-pick {overflow: inherit;padding: 0;background: none;
}

2. html

<div class="row"><div class="form-group"><div id="test1" class="webupload webupload-new" data-provides="webupload"><div class="webupload-new thumbnail webupload-default"><img th:src="@{${appConf.getStaticPath()} + '/static/images/no_img.png'}" alt="" /></div><div class="webupload-preview webupload-exists thumbnail"></div><div><span class="btn green btn-file"><span class="webupload-new file-upload"> 选择身份证 </span><span class="webupload-exists" data-select="webupload"> 重选 </span></span><a href="javascript:;" class="btn red webupload-exists" data-dismiss="webupload"> 删除 </a></div></div></div></div><div class="row"><div class="form-group"><div id="test2" class="webupload webupload-new" data-provides="webupload"><div class="webupload-new thumbnail webupload-default"><img th:src="@{${appConf.getStaticPath()} + '/static/images/no_img.png'}" alt="" /></div><div class="webupload-preview webupload-exists thumbnail"></div><div><span class="btn green btn-file"><span class="webupload-new file-upload"> 选择身份证 </span><span class="webupload-exists" data-select="webupload"> 重选 </span></span><a href="javascript:;" class="btn red webupload-exists" data-dismiss="webupload"> 删除 </a></div></div></div></div>

3. js

引入webupload js库

+function($) {"use strict";var WebUpload = function (element, options) {this.$element = $(element);this.$default = this.$element.find('.webupload-default');this.$preview = this.$element.find('.webupload-preview');var height = this.$preview.css('height');if (this.$preview.css('display') !== 'inline' && height !== '0px' && height !== 'none') {this.$preview.css('line-height', height);}this.original = {exists: this.$element.hasClass('webupload-exists'),preview: this.$preview.html(),}this.listen();};WebUpload.prototype.listen = function() {// 添加重置监听
//      $(this.$input[0].form).on('reset.bs.webupload', $.proxy(this.reset, this));this.$element.find('[data-trigger="webupload"]').on('click.bs.webupload', $.proxy(this.trigger, this));// 添加清空监听this.$element.find('[data-dismiss="webupload"]').on('click.bs.webupload', $.proxy(this.clear, this));// 添加重选监听this.$element.find('[data-select="webupload"]').on('click.bs.webupload', function(e) {$(this).closest('[data-provides="webupload"]').find(':file').click();});};WebUpload.prototype.clear = function(e) {if (e) e.preventDefault();this.$preview.html('');this.$element.find('.webupload-filename').text('');this.$element.addClass('webupload-new').removeClass('webupload-exists');//       var files = this.upload.getFiles();
//      for (var f = 0; f < files.length; f++) {
//          this.upload.removeFile(files[f], true);
//      }this.upload.reset();if (e !== undefined) {this.$element.trigger('clear.bs.webupload');}};WebUpload.prototype.reset = function() {this.clear();this.$preview.html(this.original.preview);this.$element.find('.webupload-filename').text('');this.upload.reset();if (this.original.exists) this.$element.addClass('webupload-exists').removeClass('webupload-new');else this.$element.addClass('webupload-new').removeClass('webupload-exists');}WebUpload.prototype.getImage = function() {return this.result;}WebUpload.prototype.trigger = function(e) {this.$input.trigger('click')e.preventDefault()}/*** 初始化上传组件* @param options*/function init(options, $data) {var uploader = WebUploader.create(options);$data.upload = uploader;/*** 添加文件*/uploader.on('fileQueued', function(file) {// 判断是否显示图片if ($data.$preview.length > 0) {var preview = $data.$preview;var element = $data.$element;// 设置缩略图大小var width = $data.$default.width() || 200, height = $data.$default.height() || 150;// 创建缩略图,如果为非图片文件，可以不用调用此方法。 thumbnailWidth x thumbnailHeight 为 100 x 100uploader.makeThumb(file, function(error, src) {if (error) {return;}// 显示图片var $img = $('<img>');$img[0].src = src;// if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into accountif (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10)  - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))preview.html($img)$data.$element.find('.webupload-filename').text(file.name);$data.$element.addClass('webupload-exists').removeClass('webupload-new');}, width, height);} else {// 显示文件名$data.$preview.text(file.name);$data.$element.trigger('change.bs.webupload');$data.$element.find('.webupload-filename').text(file.name);$data.$element.addClass('webupload-exists').removeClass('webupload-new');}});/*** 上传成功*/uploader.on('uploadSuccess', function(file, response) {if (response.ret == 0) {$data.result = response.data.zvs || [];} else {OssUtil.bootboxAlert({message : '上传失败：' + response.msg});}});uploader.on('uploadError', function (file, response) {OssUtil.bootboxAlert({message : '上传失败！'});});}$.fn.webupload = function (options) {// 判断是方法还是初始化if (typeof options == 'string') {if ($.fn.webupload.methods[options]) {return $.fn.webupload.methods[options](this);}}options = options || {};return this.each(function () {var $this = $(this),data = $this.data('bs.webupload');if (!data) {$this.data('bs.webupload', (data = new WebUpload(this, options)));init($.extend({}, $.fn.webupload.defaults, options), data);}if (typeof options == 'string') data[options]();});};$.fn.webupload.Constructor = WebUpload;/*** 默认参数*/$.fn.webupload.defaults = {pick : {id : '.file-upload',// 默认单选multiple : false,},// 选择文件后默认上传auto : true,swf : '/assets/global/plugins/webuploader-0.1.5/Uploader.swf',// urlserver : OSS.APISERVER.COMM + '/rest/images/attachments/json/0/0/0/0/-1/' + OssUtil.getApiToken() + '/-1/-1',// 上传文件类型accept : {title : 'Images',extensions : 'gif,jpg,jpeg,bmp,png',mimeTypes : 'image/jpg,image/jpeg,image/png'},// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开disableGlobalDnd : true,};/*** 默认方法*/$.fn.webupload.methods = {getImage : function(jq) {var $this = $(jq[0]),data = $this.data('bs.webupload');return data.result;}};$(function() {// 初始化组件$('[data-provides="webupload"]').each(function() {var $this = $(this);var data = $this.data();data.pick = data.pick || {};data.pick.id = $this.find('.file-upload');$this.webupload($this.data());});});}(window.jQuery);

4.效果图

webupload 上传相关推荐

webupload 上传插件完美版 - 拿走直接用
由于最近,我们产品web端口 ,涉及批量图片上传(你懂得, 商品嘛,都玩吐了),然后自己写了一个半成品,后来各种体验问题,然后一想那么不是傻么? 这么多上传插件. 然后,那就烂大街的 webupl ...
如何修改WebUpload上传文件默认调用系统相机，而不是手机相册？
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
Jquery插件(一) webupload上传插件
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
webUpload上传附件
仅仅是前台的上传,后台需要根据需求实现下载后直接访问_files.jsp即可 https://pan.baidu.com/s/1O8N3lLvJKtUeXug_BUyLwQ
webupload大文件上传的坑
因为新项目需要上传大文件,然后各种查资料,为了保存兼容性,选择了webupload,参照示例做好了,然后发现如果在一个页面要分开上传多个大文件时,出"鬼"了: 根据这个控件的初始化 ...
webupload 多个实例化上传按钮
工作中用到的一个前端的插件webupload,由于页面中有不确定数量的上传图片的按钮.刚开始我试着把这个插件封装,结果--欲哭无泪呀,上传不了,整个页面的上传按钮都不好使.最后在文档中,发现了addB ...
Webupload+PHP上传大文件
今天来写写上传文件这件'小事' 本文把我以前编写上传文件记录一下,给以后的自己备用和吐槽需要用到的东西 WebUpload 官网下载 PHP 开始引入webupload.js <script ...
PHP+webupload身份证正面反面图片上传实例
PHP+webupload实现身份证正面反面图片上传实例,其实原理很简单,就是固定上传两张图片,具体看下面的源代码自定义两个上传按钮 <div class="upload-image ...
WebUpload 视频上传，支持多视频上传
在项目中使用了WebUpload视频上传,由于对WebUpload的配置参数上不是很了解,走了不少弯路,以下是整理出来的代码. 前台jsp页面只有通过iframe引入该文件即可. file_uplo ...

webupload 上传

webupload 上传相关推荐

最新文章

热门文章