var imgArray1=[];//图片src数组 var $ = jQuery, // just in case. Make sure it's not an other libaray. $wrap1 = $('#uploader2'), // 图片容器 $queue1 = $('').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, // 优化retina, 在retina下这个值是2或3 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 414 * ratio, thumbnailHeight = 736 * ratio, // 可能有pedding, ready, uploading, confirm, done. state1 = 'pedding', // 所有文件的进度信息,key为file id 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; })(), // WebUploader实例 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, // 图片质量,只有type为`image/jpeg`的时候才有效。 quality: 100, // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false. allowMagnify: false, // 是否允许裁剪。 crop: false, // 为空的话则保留原有图片格式。 // 否则强制转换成指定的类型。 type: '' }, compress :{ width: 595, height: 842, // 图片质量,只有type为`image/jpeg`的时候才有效。 quality: 90, // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false. allowMagnify: false, // 是否允许裁剪。 crop: false, // 是否保留头部meta信息。 preserveHeaders: true, // 如果发现压缩后文件大小比原来还大,则使用原来图片 // 此属性可能会影响图片自动纠正功能 noCompressIfLarger: false, // 单位字节,如果图片大小小于此值,不会采用压缩。 compressSize: 0 }, // swf文件路径 swf: '../images/Uploader.swf', disableGlobalDnd: true, auto:false, //这里我们设置不自动上传,true则为自动上传 chunked: true, //是否要分片 // server: 'http://webuploader.duapp.com/server/fileupload.php', server: base_path + '/uploadImage', fileNumLimit: 5, fileSizeLimit: 15 * 1024 * 1024, // 15 M fileSingleSizeLimit: 3 * 1024 * 1024 // 3 M }); // 添加“添加文件”的按钮, uploader1.addButton({ id: '#filePicker4', label: '继续添加' }); // 当有文件添加进来时执行,负责view的创建 function addFile1( file ) { console.log(file) var $li1 = $( '
  • ' + '

    ' + file.name + '

    ' + '

    '+ '

    ' + '
  • ' ), $btns = $('
    ' + '删除' +'
    ').appendTo( $li1 ), $prgress = $li1.find('p.progress span'), $wrap1 = $li1.find( 'p.imgWrap' ), $info1 = $('

    '), 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 { // @todo lazyload $wrap1.text( '预览中' ); uploader1.makeThumb( file, function( error, src ) { if ( error ) { $wrap1.text( '不能预览' ); return; } var img = $(''); $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( '' ); } $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) +')'); // use jquery animate to rotation // $({ // rotation: rotation // }).animate({ // rotation: file.rotation // }, { // easing: 'linear', // step: function( now ) { // now = now * Math.PI / 180; // var cos = Math.cos( now ), // sin = Math.sin( now ); // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')"); // } // }); } }); $li1.appendTo( $queue1 ); } // 负责view的销毁 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 + '张失败' // stats.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'; //location.reload(); } 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("开始上传") // $(".loading>p").text("正在上传,请稍候..."); var count=0,sum=$('#filelist2 .imgWrap img').length; $('#filelist2 .imgWrap img').each(function(){ var fileSrc=$(this).attr("src"); // var fileSrc=$(this).attr("src").replace(/^data:image\/(jpeg|png|gif);base64,/,''); $.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) //reqFace = dt.returnMsg.pic; var prm={}; prm["contractUrl"]=dt.returnMsg.imgUrl; prm["contractType"]=2; imgArray1.push(prm); //$(".info").html($(".info").text()+'上传成功!'); //$(".imgWrap").append('上传成功'); $("#uploadBtn2").hide(); count++; } } }, error: function(xhr, type, errorThrown) { console.log(xhr); } }); }); var err=''; if(sum-count>0){ err=',失败'+(sum-count)+'张'; } $("#uploader2 .info").html('共'+sum+'张,上传成功'+count+'张'+err); //uploader.upload(); } else if ( state1 === 'paused' ) { console.log("开始上传") //uploader.upload(); } else if ( state1 === 'uploading' ) { //uploader.stop(); } }); $info1.on( 'click', '.retry', function() { uploader1.retry(); } ); $info1.on( 'click', '.ignore', function() { alert( 'todo' ); } ); $upload1.addClass( 'state-' + state1 ); updateTotalProgress1();