百度上传图片webuploader与photoswipe预览图片
2017-06-01 10:54
363 查看
我结合amaze UI做的,大家可以参考看看
一.引用
1.amazeUI
<link rel="stylesheet" href="themes/amaze1.0.0/amazeui.min.css"/>
<link rel="stylesheet" href="themes/amaze1.0.0/font-awesome.css"/>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="themes/amaze1.0.0/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script type="text/javascript" src="themes/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="themes/amaze1.0.0/amazeui.min.js"></script>
2.webuploader上传图片
<link rel="stylesheet" href="themes/css/webuploader.css">
<script type="text/javascript" src="themes/js/webuploader.min.js"></script>
3.photoswipe预览
<link rel="stylesheet" href="themes/css/photoswipe.css">
<script type="text/javascript" src="themes/js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="themes/js/code-photoswipe-1.0.11.min.js"></script>
二.html
uploadphotos.css
upload.js
这个js:只要注意一下几点:
1.li布局
2.获取图片的链接
3.图片的操作:删除li以及预览
一.引用
1.amazeUI
<link rel="stylesheet" href="themes/amaze1.0.0/amazeui.min.css"/>
<link rel="stylesheet" href="themes/amaze1.0.0/font-awesome.css"/>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="themes/amaze1.0.0/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script type="text/javascript" src="themes/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="themes/amaze1.0.0/amazeui.min.js"></script>
2.webuploader上传图片
<link rel="stylesheet" href="themes/css/webuploader.css">
<script type="text/javascript" src="themes/js/webuploader.min.js"></script>
3.photoswipe预览
<link rel="stylesheet" href="themes/css/photoswipe.css">
<script type="text/javascript" src="themes/js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="themes/js/code-photoswipe-1.0.11.min.js"></script>
二.html
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X- 4000 UA-Compatible" content="IE=edge"> <title>上傳圖片</title> <meta name="description" content=""> <meta name="keywords" content="gallery"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="icon" type="image/png" href="themes/images/favicon.ico"> <link rel="apple-touch-icon-precomposed" href=""> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Amaze UI" /> <link rel="stylesheet" href="themes/amaze1.0.0/amazeui.min.css"/> <link rel="stylesheet" href="themes/amaze1.0.0/font-awesome.css"/> <link rel="stylesheet" href="themes/css/webuploader.css"> <link rel="stylesheet" href="themes/css/photoswipe.css"> <link rel="stylesheet" href="themes/css/uploadphotos.css?866688"> </head> <body> <header data-am-widget="header" class="am-header am-header-default am-header-fixed zn-header-bg"> <div class="am-header-left am-header-nav"> <a><i class="fa fa-chevron-left" aria-hidden="true"></i></a> </div> <h1 class="am-header-title">上傳圖片</h1> </div> </header> <div class="zn-uploadphotos-head am-text-sm"> <p>照片冲印(尺寸:3寸,相纸:柯达皇家光面)</p> </div> <form class="am-form zn-back-bgf0f2"> <div class="zn-uploadphotos zn-back-bgf0f2"> <div id="container"> <div id="uploader"> <div class="btns"> <div id="filePicker2"></div><div class="uploadBtn">开始上传</div> </div> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker"></div> </div> </div> <div class="statusBar"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> </div> </div> </div> </div> <div data-am-widget="navbar" class="am-navbar am-no-layout zn-com-ubtn am-text-center am-text-sm am-g" > <button class="am-btn am-u-sm-12 am-btn-danger" type="submit">提交</button> </div> </form> <!--[if lt IE 9]> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> <script src="themes/amaze1.0.0/amazeui.ie8polyfill.min.js"></script> <![endif]--> <script type="text/javascript" src="themes/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="themes/amaze1.0.0/amazeui.min.js"></script> <script type="text/javascript" src="themes/js/webuploader.min.js"></script> <script type="text/javascript" src="themes/js/upload.js"></script> <script type="text/javascript" src="themes/js/simple-inheritance.min.js"></script> <script type="text/javascript" src="themes/js/code-photoswipe-1.0.11.min.js"></script> </body> </html>
uploadphotos.css
/***webuploader--开始******/ #container { border: 1px solid #dadada; margin: 15px 0 105px; background-color: #FFF; } #uploader .queueList { margin: 20px; } .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px); } #uploader .placeholder { border: 3px dashed #e6e6e6; min-height: 238px; padding-top: 158px; text-align: center; background: url(../images/image.png) center 93px no-repeat; color: #cccccc; font-size: 18px; position: relative; } #uploader .placeholder .webuploader-pick { font-size: 18px; background: #00b7ee; border-radius: 3px; line-height: 44px; padding: 0 30px; color: #fff; display: inline-block; margin: 20px auto; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } #uploader .placeholder .webuploader-pick-hover { background: #00a2d4; } #uploader .placeholder .flashTip { color: #666666; font-size: 12px; position: absolute; width: 100%; text-align: center; bottom: 20px; } #uploader .placeholder .flashTip a { color: #0785d1; text-decoration: none; } #uploader .placeholder .flashTip a:hover { text-decoration: underline; } #uploader .placeholder.webuploader-dnd-over { border-color: #999999; } #uploader .placeholder.webuploader-dnd-over.webuploader-dnd-denied { border-color: red; } #uploader .filelist { list-style: none; margin: 0; padding: 0; } #uploader .filelist:after { content: ''; display: block; width: 0; height: 0; overflow: hidden; clear: both; } #uploader .filelist li p.log { position: relative; top: -45px; } #uploader .filelist li p.title { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow : ellipsis; top: 5px; text-indent: 5px; text-align: left; } #uploader .filelist li p.progress { position: absolute; right: 5px; bottom: 0; left: 5px; height: 8px; overflow: hidden; z-index: 50; } #uploader .filelist li p.progress span { display: none; overflow: hidden; width: 0; height: 100%; background: #1483d8 url(../images/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); } @-webkit-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @-moz-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } #uploader .filelist li { position: relative; } #uploader .filelist li p{ margin: 0; } #uploader .filelist li a.imgWrap { position: relative; z-index: 2; vertical-align: middle; overflow: hidden; width: 100%; height: 100%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webit-transition: 200ms ease-out; -moz-transition: 200ms ease-out; -o-transition: 200ms ease-out; -ms-transition: 200ms ease-out; transition: 200ms ease-out; border: 1px solid #ccc; display: block; } #uploader .filelist li img { width: 100%; } #uploader .filelist li p.error { background: #f43838; color: #fff; position: absolute; bottom: 5px; left: 5px; right: 5px; height: 28px; line-height: 28px; z-index: 100; } #uploader .filelist li .success { display: block; position: absolute; left: 5px; bottom: 5px; height: 40px; right: 5px; z-index: 200; background: url(../images/success.png) no-repeat right bottom; } #uploader .filelist div.file-panel { position: absolute; height: 0; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0; background: rgba( 0, 0, 0, 0.5 ); top: 5px; left: 5px; right: 5px; overflow: hidden; z-index: 300; } #uploader .filelist div.file-panel span { width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url(../images/icons.png) no-repeat; margin: 5px 1px 1px; cursor: pointer; } #uploader .filelist div.file-panel span.rotateLeft { background-position: 0 -24px; } #uploader .filelist div.file-panel span.rotateLeft:hover { background-position: 0 0; } #uploader .filelist div.file-panel span.rotateRight { background-position: -24px -24px; } #uploader .filelist div.file-panel span.rotateRight:hover { background-position: -24px 0; } #uploader .filelist div.file-panel span.cancel { background-position: -48px -24px; } #uploader .filelist div.file-panel span.cancel:hover { background-position: -48px 0; } #uploader .statusBar { line-height:25px; vertical-align: middle; position: fixed; top: 77px; z-index: 999; padding: 0 10px; } #uploader .statusBar .progress { border: 1px solid #1483d8; width: 198px; background: #fff; height: 18px; position: relative; display: inline-block; text-align: center; line-height: 20px; color: #6dbfff; position: relative; margin-right: 10px; } #uploader .statusBar .progress span.percentage { width: 0; height: 100%; left: 0; top: 0; background: #1483d8; position: absolute; } #uploader .statusBar .progress span.text { position: relative; z-index: 10; } #uploader .statusBar .info { display: inline-block; font-size: 14px; color: #666666; height: 25px; overflow: hidden; } #uploader .statusBar .btns { position: absolute; top: 10px; right: 20px; line-height: 40px; } #filePicker2 { display: inline-block; float: left; } #uploader .btns{ position: fixed; bottom: 50px; right: 0px; line-height: 33px; z-index: 99999; } #uploader .btns .uploadBtn, #uploader .btns .uploadBtn.state-paused, #uploader .btns .uploadBtn.state-uploading, #uploader .btns .webuploader-pick, #uploader .statusBar .btns .webuploader-pick, #uploader .statusBar .btns .uploadBtn, #uploader .statusBar .btns .uploadBtn.state-uploading, #uploader .statusBar .btns .uploadBtn.state-paused { background: #ffffff; border: 1px solid #cfcfcf; color: #565656; padding: 0 18px; display: inline-block; border-radius: 3px; margin-left: 10px; cursor: pointer; font-size: 14px; float: left; } #uploader .btns .uploadBtn:hover, #uploader .btns .uploadBtn.state-uploading:hover, #uploader .btns .uploadBtn.state-paused:hover, #uploader .btns .webuploader-pick-hover, #uploader .statusBar .btns .webuploader-pick-hover, #uploader .statusBar .btns .uploadBtn:hover, #uploader .statusBar .btns .uploadBtn.state-uploading:hover, #uploader .statusBar .btns .uploadBtn.state-paused:hover { background: #f0f0f0; } #uploader .btns .uploadBtn, #uploader .statusBar .btns .uploadBtn { background: #00b7ee; color: #fff; border-color: transparent; } #uploader .btns .uploadBtn:hover, #uploader .statusBar .btns .uploadBtn:hover { background: #00a2d4; } #uploader .btns .uploadBtn.disabled, #uploader .statusBar .btns .uploadBtn.disabled { pointer-events: none; opacity: 0.6; } /***webuploader--结束*****/ body{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 1.2rem; } .zn-back-bgff0 { background-color: #ff0000; } .zn-back-bgf0f2 { background: #f0f2f5; } /******头部 开始**********/ .zn-header-bg{ background: #e6e6e6; } .zn-header-bg>h1.am-header-title,.zn-header-bg .am-header-nav>a{ color: #333; font-size: 1.7rem; } /***图档上传页面--开始****/ .zn-uploadphotos-head{ padding: 5px 10px; background: #fff; position: fixed; top: 49px; z-index: 999; width: 100%; left: 0; height: 60px; } .zn-uploadphotos-head p{ margin: 0; line-height: 2rem; height: 25px; overflow: hidden; } .zn-uploadphotos{ padding: 20px 0 0; margin: 50px 0 60px; } .zn-uploadphotos-del{ position: absolute; top: 15px; right: 14px; font-size: 2rem; color: #f00; padding: 2px 3px; background: #fff; border-radius: 15%; z-index: 990; cursor: pointer; border: 1px solid #f00; margin: 0; } #uploadimg{ width: 100%; height: 100%; } .zn-uploadphotos-del .fa{ display: block; } .zn-com-ubtn{ background: #fff; border-top: 1px solid #ccc; z-index: 999; } .zn-com-ubtn button{ padding: 1em 1em; cursor: pointer; } .zn-com-ubtn .webuploader-pick{ width: 100%; background: transparent; padding: 0; color: #333; } /*.am-avg-sm-2>li{ height: 50%; } @media only screen and (min-width: 641px){ .am-avg-md-4>li { width: 25%; height: 25%; } } @media only screen and (min-width: 1025px){ .am-avg-lg-8>li { width: 12.5%; height: 12.5%; } }*/ /***图档上传页面--结束****/ } .zn-com-prompt .fa.zn-text-colrff98{ font-size: 5rem; color: #FF9800; padding: 0; margin: 0; } .zn-com-prompt p a{ color: #FF5722; } .zn-com-prompt .am-btn{ margin: 10px; padding: .5rem 10rem; } /**完成訂單頁面--结束****/
upload.js
(function( $ ){ // 当domReady的时候开始初始化 $(function() { var $wrap = $('#uploader'), // 图片容器 $queue = $( '<ul id="Gallery" class="zn-uploadphotos-list filelist am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-8 am-gallery-default am-no-layout"></ul>' ) .appendTo( $wrap.find( '.queueList' ) ), // 状态栏,包括进度和控制按钮 $statusBar = $wrap.find( '.statusBar' ), // 文件总体选择信息。 $info = $statusBar.find( '.info' ), // 上传按钮 $upload = $wrap.find( '.uploadBtn' ), // 没选择文件之前的内容。 $placeHolder = $wrap.find( '.placeholder' ), $progress = $statusBar.find( '.progress' ).hide(), // 添加的文件数量 fileCount = 0, // 添加的文件总大小 fileSize = 0, // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息,key为file id percentages = {}, // 判断浏览器是否支持图片的base64 isSupportBase64 = ( function() { var data = new Image(); var support = true; data.onload = data.onerror = function() { if( this.width != 1 || this.height != 1 ) { support = false; } } data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; } )(), // 检测是否已经安装flash,检测flash的版本 flashVersion = ( function() { var version; try { version = navigator.plugins[ 'Shockwave Flash' ]; version = version.des fbeb cription; } catch ( ex ) { try { version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash') .GetVariable('$version'); } catch ( ex2 ) { version = '0.0'; } } version = version.match( /\d+/g ); return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 ); } )(), 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; })(), // WebUploader实例 uploader; if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) { // flash 安装了但是版本过低。 if (flashVersion) { (function(container) { window['expressinstallcallback'] = function( state ) { switch(state) { case 'Download.Cancelled': alert('您取消了更新!') break; case 'Download.Failed': alert('安装失败') break; default: alert('安装已成功,请刷新!'); break; } delete window['expressinstallcallback']; }; var swf = './expressInstall.swf'; // insert flash object var html = '<object type="application/' + 'x-shockwave-flash" data="' + swf + '" '; if (WebUploader.browser.ie) { html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; } html += 'width="100%" height="100%" style="outline:0">' + '<param name="movie" value="' + swf + '" />' + '<param name="wmode" value="transparent" />' + '<param name="allowscriptaccess" value="always" />' + '</object>'; container.html(html); })($wrap); // 压根就没有安转。 } else { $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>'); } return; } else if (!WebUploader.Uploader.support()) { alert( 'Web Uploader 不支持您的浏览器!'); return; } // 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker', label: '点击选择图片' }, formData: { uid: 123 }, dnd: '#dndArea', paste: '#uploader', duplicate :true, swf: '../../dist/Uploader.swf', chunked: false, chunkSize: 512 * 1024, server: '../../server/fileupload.php', // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 disableGlobalDnd: true, fileNumLimit: 300, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M }); // 拖拽时不接受 js, txt 文件。 uploader.on( 'dndAccept', function( items ) { var denied = false, len = items.length, i = 0, // 修改js类型 unAllowed = 'text/plain;application/javascript '; for ( ; i < len; i++ ) { // 如果在列表里面 if ( ~unAllowed.indexOf( items[ i ].type ) ) { denied = true; break; } } return !denied; }); uploader.on('dialogOpen', function() { console.log('here'); }); // 添加“添加文件”的按钮, uploader.addButton({ id: '#filePicker2', label: '继续添加' }); uploader.on('ready', function() { window.uploader = uploader; }); // 当有文件添加进来时执行,负责view的创建 function addFile( file ) { var $li = $( '<li id="' + file.id + 'class="gallery-item"">' + '<p class="title li_p">' + file.name + '</p>' + '<a class="imgWrap li_p" href="http://s.amazeui.org/media/i/demos/bing-1.jpg""></a>'+ '<p class="progress li_p"><span></span></p>' + '<p class="zn-uploadphotos-del li_p"><i class="fa fa-times" aria-hidden="true"></i></p>'+ '</li>' ), $prgress = $li.find('p.progress span'), $wrap = $li.find( 'a.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 ) { var img; $wrap.attr('href',src);//获取a的链接 if ( error ) { $wrap.text( '不能预览' ); return; } if( isSupportBase64 ) { img = $('<img class="example3" src="'+src+'">'); $wrap.empty().append( img ); } else { $.ajax('../../server/preview.php', { method: 'POST', data: src, dataType:'json' }).done(function( response ) { if (response.result) { img = $('<img class="example3" src="'+response.result+'">'); $wrap.empty().append( img ); } else { $wrap.text("预览出错"); } }); } }, 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' ) { $info.remove(); $prgress.css('display', 'block'); percentages[ file.id ][ 1 ] = 0; } else if ( cur === 'progress' ) { $info.remove(); $prgress.css('display', 'block'); } else if ( cur === 'complete' ) { $prgress.hide().width(0); $li.append( '<span class="success"></span>' ); } $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur ); }); //删除li $li.on( 'click', '.li_p', function() { var index = $(this).index(),deg; switch ( index ) { case 1: Code.photoSwipe('a', '#Gallery'); return; case 3: 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+ '张照片至XX相册,'+ stats.uploadFailNum + '张照片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" 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.hide(); $statusBar.addClass( 'element-invisible' ); uploader.refresh(); break; case 'ready': $placeHolder.addClass( 'element-invisible' ); $( '#filePicker2' ).removeClass( 'element-invisible'); $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(); $( '#filePicker2' ).removeClass( 'element-invisible' ); $upload.text( '开始上传' ); 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(); }); })( jQuery );
这个js:只要注意一下几点:
1.li布局
// 当有文件添加进来时执行,负责view的创建 function addFile( file ) { var $li = $( '<li id="' + file.id + 'class="gallery-item"">' + '<p class="title li_p">' + file.name + '</p>' + '<a class="imgWrap li_p" href="http://s.amazeui.org/media/i/demos/bing-1.jpg""></a>'+ '<p class="progress li_p"><span></span></p>' + '<p class="zn-uploadphotos-del li_p"><i class="fa fa-times" aria-hidden="true"></i></p>'+ '</li>' ), $prgress = $li.find('p.progress span'), $wrap = $li.find( 'a.imgWrap' ), $info = $('<p class="error"></p>'),
2.获取图片的链接
uploader.makeThumb( file, function( error, src ) { var img; $wrap.attr('href',src);//获取a的链接
3.图片的操作:删除li以及预览
//删除li $li.on( 'click', '.li_p', function() { var index = $(this).index(),deg; switch ( index ) { case 1: Code.photoSwipe('a', '#Gallery'); return; case 3: uploader.removeFile( file ); return; } });
相关文章推荐
- 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)
- webuploader服务器端接收文件的脚本分析,server端怎么接收上传的文件和图片-百度webuploader教程5
- SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片
- 官方demo修改后的webuploader上传预览图片(兼容IE8) github下载回来的有问题
- 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑
- 百度上传工具webuploader,图片上传附加参数
- 用百度开源webuploader 上传图片 rubyonrails 后端代码
- 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了
- 百度webuploader上传 1
- Web Uploader图片上传 java实现
- 使用Webuploader和图片Base64特性完成IE8及其它浏览器的头像上传
- 使用webuploader批量上传图片
- 【总结】手机图片预览插件photoswipe使用总结
- 百度 flash html5自切换 多文件异步上传控件webuploader基本用法
- 妈蛋:kinMaxShow旋转木马异常,WebUploader图片上传坑爹,图像被压缩
- 百度webuploader上传组件学习,Java版
- Yii2结合webuploader实现图片上传
- Asp.Net Mvc 使用WebUploader 多图片上传
- 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了
- 百度Webuploader 大文件分片上传(.net接收)