webuploader上传图片插件案例

1.引入插件

<link rel="stylesheet" href="../../resources/js/plugins/webuploader-0.1.5/webuploader.css">

<script src="../../resources/js/min/jquery-1.9.1.min.js"></script>
<script src="../../resources/js/plugins/webuploader-0.1.5/webuploader.min.js"></script>

2.html

<td width="125px" class="label-text text-right vertical-top">企业logo：</td>
<td colspan="5"><img id="logoPriview" class="product-img" src="../../resources/img/supplier/default.png"><div class="upload-tip">* 本地图片，支持JPG、JPEG、PNG 格式，<br>最佳长宽比例2:1， 图片大小不超过2M<br><div id="logoUploadBtn" class="mgt5"></div></div></td>

3.css

.new-supplier .product-img{width:110px;height:110px;border-radius:6px;}
.new-supplier .upload-tip{display:inline-block;padding-left:10px;vertical-align:bottom;line-height:18px;font-size:12px;color:#de4751;}

/*按钮不能点击问题，直接在页面上设置样式最省事*/ #logoUploadBtn div:nth-child(2){width:100%!important;height:100%!important;}

4.js

$(function () {var $ = jQuery;var uploader,baseInfoUploader,productImgUploader,projectCoverUploader;// 图表tab切换$.each($('.chart-list li'), function (i) {$(this).on('click', function () {$(this).addClass('active').siblings('li').removeClass('active');$('.tabs-content').eq(i).show().siblings('.tabs-content').hide();});});// 上传企业logobaseInfoUploader = WebUploader.create({auto: false,swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',// 文件接收服务端。server: 'http://webuploader.duapp.com/server/fileupload.php',pick: {id: '#logoUploadBtn',innerHTML: '选择图片',multiple: true},// 只允许选择图片文件。accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},fileSingleSizeLimit: 2 * 1024 * 1024});baseInfoUploader.on( 'fileQueued', function( file ) {$img = $('#logoPriview');baseInfoUploader.makeThumb( file, function( error, src ) {if ( error ) {return;}$img.attr( 'src', src );}, 110, 110 );});// 上传产品图片// 在弹层里面的时候，弹出show出来之后，要调用uploader.refresh()方法，否则选择文件的按钮会点击之后没反应（因为太小了，其实没点到）productImgUploader = WebUploader.create({auto: false,swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',// 文件接收服务端。server: 'http://webuploader.duapp.com/server/fileupload.php',pick: {id: '#productImgUploadBtn',innerHTML: '选择图片',multiple: true},// 只允许选择图片文件。accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},fileSingleSizeLimit: 2 * 1024 * 1024});productImgUploader.on( 'fileQueued', function( file ) {$img = $('#productImgPriview');productImgUploader.makeThumb( file, function( error, src ) {if ( error ) {return;}$img.attr( 'src', src );}, 110, 110 );});// 上传项目封面图projectCoverUploader = WebUploader.create({auto: false,swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',// 文件接收服务端。server: 'http://webuploader.duapp.com/server/fileupload.php',pick: {id: '#projectCoverUploadBtn',innerHTML: '选择图片',multiple: true},// 只允许选择图片文件。accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},fileSingleSizeLimit: 2 * 1024 * 1024});projectCoverUploader.on( 'fileQueued', function( file ) {$img = $('#projectCoverPriview');projectCoverUploader.makeThumb( file, function( error, src ) {if ( error ) {return;}$img.attr( 'src', src );}, 110, 110 );});//诚信认证，多文件上传$wrap = $('#uploader'),// 图片容器$queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList')),$listTitle = $wrap.find('.list-title');// 状态栏，包括进度和控制按钮$statusBar = $wrap.find('.statusBar'),// 文件总体选择信息。$info = $statusBar.find('.info'),// 上传按钮$upload = $('.upload-img').find('.uploadBtn'),// 总体进度条$progress = $statusBar.find('.progress').hide(),// 添加的文件数量fileCount = 0,// 添加的文件总大小fileSize = 0,// 优化retina, 在retina下这个值是2ratio = window.devicePixelRatio || 1,// 缩略图大小thumbnailWidth = 80 * ratio,thumbnailHeight = 80 * ratio,// 可能有pedding, ready, uploading, confirm, done.state = 'pedding',// 所有文件的进度信息，key为file idpercentages = {},supportTransition = (function () {var s = document.createElement('p').style,r = 'transition' in s ||'WebkitTransition' in s ||'MozTransition' in s ||'msTransition' in s ||'OTransition' in s;s = null;return r;})(),//        if ( !WebUploader.Uploader.support() ) {
//            alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
//            throw new Error( 'WebUploader does not support the browser you are using.' );
//        }// 实例化uploader = WebUploader.create({pick: {id: '#filePicker',innerHTML: '选择图片',multiple: true},accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},// swf文件路径swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',disableGlobalDnd: true,chunked: true,// server: 'http://webuploader.duapp.com/server/fileupload.php',server: 'http://2betop.net/fileupload.php',fileNumLimit: 300,fileSizeLimit: 20 * 1024 * 1024,    // 200 MfileSingleSizeLimit: 2 * 1024 * 1024    // 50 M});// 当有文件添加进来时执行，负责view的创建function addFile(file) {var $li = $('<li id="' + file.id + '">' +'<p class="imgWrap"></p>' +'<p class="progress"><span></span></p>' +'<p title=' + file.name + ' class="title ellipsis">' + file.name + '</p>' +'</li>'),$btns = $('<div class="file-panel">' +'<span class="cancel"></span>').appendTo($li),
//                '<span class="rotateRight">向右旋转</span>' +
//                '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),$prgress = $li.find('p.progress span'),$wrap = $li.find('p.imgWrap'),$info = $('<p class="error"></p>'),showError = function (code) {switch (code) {case 'exceed_size':text = '文件大小超出';break;case 'interrupt':text = '上传暂停';break;default:text = '上传失败';break;}$info.text(text).appendTo($li);};if (file.getStatus() === 'invalid') {showError(file.statusText);} else {// @todo lazyload$wrap.text('预览中');uploader.makeThumb(file, function (error, src) {if (error) {$wrap.text('不能预览');return;}var img = $('<img src="' + src + '">');$wrap.empty().append(img);}, thumbnailWidth, thumbnailHeight);percentages[file.id] = [file.size, 0];file.rotation = 0;}file.on('statuschange', function (cur, prev) {if (prev === 'progress') {$prgress.hide().width(0);} else if (prev === 'queued') {
//                $li.off( 'mouseenter mouseleave' );$btns.remove();}// 成功if (cur === 'error' || cur === 'invalid') {console.log(file.statusText);showError(file.statusText);percentages[file.id][1] = 1;} else if (cur === 'interrupt') {showError('interrupt');} else if (cur === 'queued') {percentages[file.id][1] = 0;} else if (cur === 'progress') {$info.remove();$prgress.css('display', 'block');} else if (cur === 'complete') {$li.append('<p class="success">上传成功</p>');}$li.removeClass('state-' + prev).addClass('state-' + cur);});$btns.on('click', 'span', function () {var index = $(this).index();switch (index) {case 0:uploader.removeFile(file);return;}});$li.appendTo($queue);}// 负责view的销毁function removeFile(file) {var $li = $('#' + file.id);delete percentages[file.id];updateTotalProgress();$li.off().find('.file-panel').off().end().remove();}function updateTotalProgress() {var loaded = 0,total = 0,spans = $progress.children(),percent;$.each(percentages, function (k, v) {total += v[0];loaded += v[0] * v[1];});percent = total ? loaded / total : 0;spans.eq(0).text(Math.round(percent * 100) + '%');spans.eq(1).css('width', Math.round(percent * 100) + '%');updateStatus();}function updateStatus() {var text = '', stats;if (state === 'ready') {text = '选中' + fileCount + '张图片，共' +WebUploader.formatSize(fileSize) + '。';} else if (state === 'confirm') {stats = uploader.getStats();if (stats.uploadFailNum) {text = '已成功上传' + stats.successNum + '张图片，' +stats.uploadFailNum + '张图片上传失败，<a class="retry" style="color: #de4751;" href="#">重新上传</a>失败图片'}} else {stats = uploader.getStats();text = '共' + fileCount + '张（' +WebUploader.formatSize(fileSize) +'），已上传' + stats.successNum + '张';if (stats.uploadFailNum) {text += '，失败' + stats.uploadFailNum + '张';}}$info.html(text);}function setState(val) {var file, stats;if (val === state) {return;}$upload.removeClass('state-' + state);$upload.addClass('state-' + val);state = val;switch (state) {case 'pedding':
//                $placeHolder.removeClass( 'element-invisible' );$queue.parent().removeClass('filled');$queue.hide();$statusBar.addClass('element-invisible');uploader.refresh();break;case 'ready':
//                $placeHolder.addClass( 'element-invisible' );
//                $( '#filePicker2' ).removeClass( 'element-invisible');$wrap.show();$upload.removeClass('disabled');$queue.parent().addClass('filled');$queue.show();$statusBar.removeClass('element-invisible');uploader.refresh();break;case 'uploading':
//                $( '#filePicker2' ).addClass( 'element-invisible' );$progress.show();$upload.text('暂停上传');break;case 'paused':$progress.show();$upload.text('继续上传');break;case 'confirm':$progress.hide();$upload.text('开始上传').addClass('disabled');stats = uploader.getStats();if (stats.successNum && !stats.uploadFailNum) {setState('finish');return;}break;case 'finish':stats = uploader.getStats();if (stats.successNum) {alert('上传成功');} else {// 没有成功的图片，重设state = 'done';location.reload();}break;}updateStatus();}uploader.onUploadProgress = function (file, percentage) {var $li = $('#' + file.id),$percent = $li.find('.progress span');$percent.css('width', percentage * 100 + '%');percentages[file.id][1] = percentage;updateTotalProgress();};uploader.onFileQueued = function (file) {fileCount++;fileSize += file.size;if (fileCount === 1) {
//            $placeHolder.addClass( 'element-invisible' );$statusBar.show();}addFile(file);setState('ready');updateTotalProgress();};uploader.onFileDequeued = function (file) {fileCount--;fileSize -= file.size;if (!fileCount) {setState('pedding');}removeFile(file);updateTotalProgress();};uploader.on('all', function (type) {var stats;switch (type) {case 'uploadFinished':setState('confirm');break;case 'startUpload':setState('uploading');break;case 'stopUpload':setState('paused');break;}});uploader.onError = function (code) {alert('Eroor: ' + code);};$upload.on('click', function () {if ($(this).hasClass('disabled')) {return false;}if (state === 'ready') {uploader.upload();} else if (state === 'paused') {uploader.upload();} else if (state === 'uploading') {uploader.stop();}});$info.on('click', '.retry', function () {uploader.retry();});$info.on('click', '.ignore', function () {alert('todo');});$upload.addClass('state-' + state);updateTotalProgress();
});

附图：

webuploader上传图片插件案例相关推荐

WebUploader上传图片插件
学习地址:http://fex.baidu.com/webuploader/ 文档接口:http://fex.baidu.com/webuploader/document.html Demo:http ...
房源分页展示和实现webuploader上传图片
分页展示创建资源控制器并关联模型 php artisan make:controller Admin/FangController -r -m Models/Fang //资源路由 Route::r ...
AS 自定义 Gradle plugin 插件案例 MD
Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
uploadifive不用flash上传图片插件，基于h5和jQuery上传图片插件
之前公司用的一直是uploadify,基于flash的,随着flash的淘汰,好多浏览器已经屏蔽flash了,谷歌的,就连最近的win10也弃掉了flash,所以为了更好的用户体验改用uploadif ...
一个好用的上传图片插件
记录一下最近使用的一个用来做上传图片的插件. 名称:webuploader 插件地址:http://fex.baidu.com/webuploader/getting-started.html 加载方 ...
jq ajax异步上传图片插件,jQuery异步上传文件插件ajaxFileUpload详细介绍
一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
【学习笔记】mybatis自定义插件案例代码
文章目录插件介绍案例实体类: 定义插件: 测试: 插件介绍插件是MyBatis提供的一个非常强大的机制,我们可以通过插件来修改MyBatis的一些核心行为.插件通过动态代理机制,可以介入四大对 ...
jq php上传图片插件,ajaxImageUpload
jQuery 图片上传插件,支持批量上传.预览.删除.放大.上传数量.上传大小.追加方式配置以及上传前.上传中和上传后的回调函数. 上传前上传后使用方法 1.先引入jquery和插件的css和js ...

webuploader上传图片插件案例

webuploader上传图片插件案例相关推荐

最新文章

热门文章