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庫

<script tsrc="/plugins/webuploader-0.1.5/webuploader.js" type="text/javascript"></script>

+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 上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。