123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524 |
- var imgArray1=[];
- var $ = jQuery,
- $wrap1 = $('#uploader2'),
-
- $queue1 = $('<ul id="filelist2" class="filelist"></ul>').appendTo( $wrap1.find('#queueList2') ),
-
- $statusBar1 = $wrap1.find('.statusBar'),
-
- $info1 = $statusBar1.find('.info'),
-
- $upload1 = $wrap1.find('#uploadBtn2'),
-
- $placeHolder1 = $wrap1.find('.placeholder'),
-
- $progress1 = $statusBar1.find('.progress').hide(),
-
- fileCount1 = 0,
-
- fileSize1 = 0,
-
- ratio = window.devicePixelRatio || 1,
-
- thumbnailWidth = 414 * ratio,
- thumbnailHeight = 736 * ratio,
-
- state1 = 'pedding',
-
- percentages1 = {},
- supportTransition1 = (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;
- })(),
-
- uploader1;
- if ( !WebUploader.Uploader.support() ) {
- alert( 'Web Uploader 不支持您的浏览器!如果你使用的是IE浏览器,请尝试升级 flash 播放器');
- throw new Error( 'WebUploader does not support the browser you are using.' );
- }
-
- uploader1 = WebUploader.create({
- pick: {
- id: '#filePicker3',
- label: '选择图片',
- multiple:true
- },
- dnd: '#uploader2 .queueList',
- paste: document.body,
- accept: {
- title: 'Images',
- extensions: 'jpg,jpeg,png',
- mimeTypes: 'image/*'
- },
- thumb :{
- width: 595,
- height: 842,
-
- quality: 100,
-
- allowMagnify: false,
-
- crop: false,
-
-
- type: ''
- },
- compress :{
- width: 595,
- height: 842,
-
- quality: 90,
-
- allowMagnify: false,
-
- crop: false,
-
- preserveHeaders: true,
-
-
- noCompressIfLarger: false,
-
- compressSize: 0
- },
-
- swf: '../images/Uploader.swf',
- disableGlobalDnd: true,
-
- auto:false,
-
- chunked: true,
-
- server: base_path + '/uploadImage',
- fileNumLimit: 5,
- fileSizeLimit: 15 * 1024 * 1024,
- fileSingleSizeLimit: 3 * 1024 * 1024
- });
-
- uploader1.addButton({
- id: '#filePicker4',
- label: '继续添加'
- });
-
- function addFile1( file ) {
- console.log(file)
- var $li1 = $( '<li id="' + file.id + '">' +
- '<p class="title">' + file.name + '</p>' +
- '<p class="imgWrap"></p>'+
- '<p class="progress"><span></span></p>' +
- '</li>' ),
- $btns = $('<div class="file-panel">' +
- '<span class="cancel">删除</span>' +'</div>').appendTo( $li1 ),
- $prgress = $li1.find('p.progress span'),
- $wrap1 = $li1.find( 'p.imgWrap' ),
- $info1 = $('<p class="error"></p>'),
- showError = function( code ) {
- switch( code ) {
- case 'exceed_size':
- text = '文件大小超出';
- break;
- case 'interrupt':
- text = '上传暂停';
- break;
- default:
- text = '上传失败,请重试';
- break;
- }
- $info1.text( text ).appendTo( $li1 );
- };
- if ( file.getStatus() === 'invalid' ) {
- showError( file.statusText );
- } else {
-
- $wrap1.text( '预览中' );
- uploader1.makeThumb( file, function( error, src ) {
- if ( error ) {
- $wrap1.text( '不能预览' );
- return;
- }
- var img = $('<img src="'+src+'">');
- $wrap1.empty().append( img );
- }, thumbnailWidth, thumbnailHeight );
- percentages1[ 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' ) {
- $li1.off( 'mouseenter mouseleave' );
- $btns.remove();
- }
-
- if ( cur === 'error' || cur === 'invalid' ) {
- console.log( file.statusText );
- showError( file.statusText );
- percentages1[ file.id ][ 1 ] = 1;
- } else if ( cur === 'interrupt' ) {
- showError( 'interrupt' );
- } else if ( cur === 'queued' ) {
- percentages1[ file.id ][ 1 ] = 0;
- } else if ( cur === 'progress' ) {
- $info1.remove();
- $prgress.css('display', 'block');
- } else if ( cur === 'complete' ) {
- $li1.append( '<span class="success"></span>' );
- }
- $li1.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
- });
- $li1.on( 'mouseenter', function() {
- $btns.stop().animate({height: 30});
- });
- $li1.on( 'mouseleave', function() {
- $btns.stop().animate({height: 0});
- });
- $btns.on( 'click', 'span', function() {
- var index = $(this).index(),
- deg;
- switch ( index ) {
- case 0:
- uploader1.removeFile( file );
- reqFace='';
- return;
- case 1:
- file.rotation += 90;
- break;
- case 2:
- file.rotation -= 90;
- break;
- }
- if ( supportTransition1 ) {
- deg = 'rotate(' + file.rotation + 'deg)';
- $wrap1.css({
- '-webkit-transform': deg,
- '-mos-transform': deg,
- '-o-transform': deg,
- 'transform': deg
- });
- } else {
- $wrap1.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- });
- $li1.appendTo( $queue1 );
- }
-
- function removeFile( file ) {
- var $li1 = $('#'+file.id);
- delete percentages1[ file.id ];
- updateTotalProgress1();
- $li1.off().find('.file-panel').off().end().remove();
- }
- function updateTotalProgress1() {
- var loaded = 0,
- total = 0,
- spans = $progress1.children(),
- percent;
- $.each( percentages1, 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 ) + '%' );
- updateStatus1();
- }
- function updateStatus1() {
- var text = '', stats1;
- if ( state1 === 'ready' ) {
- text = '选中' + fileCount1 + '张图片,共' +
- WebUploader.formatSize( fileSize1 ) + '。';
- $("#uploadBtn2").show();
- } else if ( state1 === 'confirm' ) {
- stats1 = uploader1.getStats();
- if ( stats1.uploadFailNum ) {
- text = '已成功上传' + stats1.successNum+ '张图片,'+
- stats1.uploadFailNum + '张失败'
- }
- } else {
- stats1 = uploader1.getStats();
- text = '共' + fileCount1 + '张(' +
- WebUploader.formatSize( fileSize1 ) +
- '),已上传' + stats1.successNum + '张';
- if ( stats1.uploadFailNum ) {
- text += ',失败' + stats1.uploadFailNum + '张';
- }
- }
- $info1.html( text );
- }
- function setState1( val ) {
- var file, stats1;
- if ( val === state1 ) {
- return;
- }
- $upload1.removeClass( 'state-' + state1 );
- $upload1.addClass( 'state-' + val );
- state1 = val;
- switch ( state1 ) {
- case 'pedding':
- $placeHolder1.removeClass( 'element-invisible' );
- $queue1.parent().removeClass('filled');
- $queue1.hide();
- $statusBar1.addClass( 'element-invisible' );
- uploader1.refresh();
- break;
- case 'ready':
- $placeHolder1.addClass( 'element-invisible' );
- $( '#filePicker2' ).removeClass( 'element-invisible');
- $queue1.parent().addClass('filled');
- $queue1.show();
- $statusBar1.removeClass('element-invisible');
- uploader1.refresh();
- break;
- case 'uploading':
- $( '#filePicker2' ).addClass( 'element-invisible' );
- $progress1.show();
- $upload1.text( '暂停上传' );
- break;
- case 'paused':
- $progress1.show();
- $upload1.text( '继续上传' );
- break;
- case 'confirm':
- $progress1.hide();
- $upload1.text( '开始上传' ).addClass( 'disabled' );
- stats1 = uploader1.getStats();
- if ( stats1.successNum && !stats1.uploadFailNum ) {
- setState1( 'finish' );
- return;
- }
- break;
- case 'finish':
- stats1 = uploader1.getStats();
- if ( stats1.successNum ) {
- console.log( '上传成功' );
- } else {
-
- state1 = 'done';
-
- }
- break;
- }
- updateStatus1();
- }
- uploader1.onUploadProgress = function( file, percentage ) {
- var $li1 = $('#'+file.id),
- $percent = $li1.find('.progress span');
- $percent.css( 'width', percentage * 100 + '%' );
- percentages1[ file.id ][ 1 ] = percentage;
- updateTotalProgress1();
- };
- uploader1.onFileQueued = function( file ) {
- fileCount1++;
- fileSize1 += file.size;
- if ( fileCount1 === 1 ) {
- $placeHolder1.addClass( 'element-invisible' );
- $statusBar1.show();
- }
- addFile1( file );
- setState1( 'ready' );
- updateTotalProgress1();
- };
- uploader1.onFileDequeued = function( file ) {
- fileCount1--;
- fileSize1 -= file.size;
- if ( !fileCount1 ) {
- setState1( 'pedding' );
- }
- removeFile( file );
- updateTotalProgress1();
- };
- uploader1.on( 'all', function( type ) {
- var stats1;
- switch( type ) {
- case 'uploadFinished':
- setState1( 'confirm' );
- break;
- case 'startUpload':
- setState1( 'uploading' );
- break;
- case 'stopUpload':
- setState1( 'paused' );
- break;
- }
- });
- uploader1.onError = function( code ) {
- alert( 'Eroor: ' + code );
- };
-
- $upload1.on('click', function() {
- if ( $(this).hasClass( 'disabled' ) ) {
- return false;
- }
- if ( state1 === 'ready' ) {
- console.log("开始上传")
- var count=0,sum=$('#filelist2 .imgWrap img').length;
- $('#filelist2 .imgWrap img').each(function(){
- var fileSrc=$(this).attr("src");
- $.ajax(base_path + '/approval/baseFileUpload?dates=' + new Date().getTime(), {
- data: {
- "file": fileSrc
- },
- dataType: 'json',
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- async : false,
- type: 'post',
- timeout: 25000,
- success: function(dt) {
- if(dt.isRedirect) {
- location.href = dt.redirectURL;
- } else {
- if(dt.returnCode == "200") {
- console.log(dt)
-
- var prm={};
- prm["contractUrl"]=dt.returnMsg.imgUrl;
- prm["contractType"]=2;
- imgArray1.push(prm);
-
-
- $("#uploadBtn2").hide();
- count++;
- }
- }
- },
- error: function(xhr, type, errorThrown) {
- console.log(xhr);
- }
- });
- });
- var err='';
- if(sum-count>0){
- err=',失败<span style="color:#f00;">'+(sum-count)+'</span>张';
- }
- $("#uploader2 .info").html('共'+sum+'张,上传成功<span style="color:#5882f7;">'+count+'</span>张'+err);
-
- } else if ( state1 === 'paused' ) {
- console.log("开始上传")
-
- } else if ( state1 === 'uploading' ) {
-
- }
- });
- $info1.on( 'click', '.retry', function() {
- uploader1.retry();
- } );
- $info1.on( 'click', '.ignore', function() {
- alert( 'todo' );
- } );
- $upload1.addClass( 'state-' + state1 );
- updateTotalProgress1();
|