php webuploader教程,PHPCMS系统swfupload上传控件更换为基于html5的webuploader组件

jQuery.support.cors = true;

var is_auto = true;

jQuery(function() {

var $ = jQuery,

$list = $('#fileList'),

$up_btn = $('#ctlBtn'),

state = 'pending',

onerror_img = '',

// 优化retina, 在retina下这个值是2

ratio = window.devicePixelRatio || 1,

// 缩略图大小

thumbnailWidth = 100 * ratio,

thumbnailHeight = 100 * ratio,

// Web Uploader实例

uploader;

// 初始化Web Uploader

uploader = WebUploader.create({

auto: is_auto,

method: 'POST',

//sendAsBinary: true,

swf: '<?php echo JS_PATH?>webuploader-0.1.5/Uploader.swf',

// 文件接收服务端。这里也是默认的上传接口地址 http://www.99xq.cn

server: '/index.php?m=attachment&c=attachments&a=swfupload&dosubmit=1',

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#filePicker',

fileVal : 'Filedata',

fileNumLimit : '<?php echo $file_upload_limit;?>',

fileSingleSizeLimit : '<?php echo $site_setting['upload_maxsize']*1024;?>',

formData: {

dosubmit: 1,

swf_auth_key : '<?php echo $swf_auth_key;?>',

SWFUPLOADSESSID : '<?php echo $sess_id?>',

isadmin: '<?php echo $isadmin;?>',

groupid:'<?php echo $groupid;?>',

module:'<?php echo $_GET['module'];?>',

catid:'<?php echo $_GET['catid'];?>',

siteid:'<?php echo $siteid;?>',

userid:'<?php echo $userid;?>',

watermark_enable:'',

},

// 只允许选择文件，可选。

accept: {

title: '上传文件',

extensions: '<?php echo str_replace(array('*.',';'),array('',','),$file_types)?>',

//mimeTypes: 'image/*'

}

});

// 当有文件添加进来的时候

uploader.on( 'fileQueued', function( file ) {

var $li = $(

'

' +

'' +

'

' + file.name + '

' +

'

'

),

$img = $li.find('img');

$list.append( $li );

// 创建缩略图

uploader.makeThumb( file, function( error, src ) {

if ( error ) {

var img_ext_array = new Array('jpg', 'jpeg', 'gif', 'png', 'bmp');

console.info(file);

if( img_ext_array.indexOf(file.ext) > -1 ){

//TODO 浏览器不支持data URI缩略图

$img.replaceWith('不能预览');

}

else{//其他文件,调取对应的ico

src = "/statics/images/ext/"+ file.ext +".png";

onerror_img = "/statics/images/ext/do.png";

}

}

$img.attr( 'src', src );

if(onerror_img){

$img.on( 'error', function(){

$img.attr( 'src', onerror_img );

} );

}

}, thumbnailWidth, thumbnailHeight );

});

//额外赋值

uploader.on('uploadBeforeSend', function (obj, data, headers) {

var watermark_val = $('#watermark_enable').attr('checked');

data.formData= { "watermark_enable": watermark_val ? 1 : 0 };

});

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

var $li = $( '#'+file.id ),

$percent = $li.find('.progress span');

// 避免重复创建

if ( !$percent.length ) {

$percent = $('

.appendTo( $li )

.find('span');

}

$percent.html('进度：'+percentage * 100 + '%' );

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

uploader.on( 'uploadSuccess', function( file,data ) {

dat = data._raw;

var arr = dat.split(',');

var name = arr[3];

var path = arr[1];

var file_id = arr[0];

$('#'+file.id).addClass('upload-state-done');

$('#'+file.id).children("img").wrapAll('');//兼容老的交互选择方式

$('#'+file.id+' a').children("img").attr('path', path).attr('title', name);

$('#'+file.id+' a').attr('title', name);

$('#'+file.id+' a').on('click', function(){

album_cancel(this, file_id, path);

});

$('#'+file.id+' a').trigger('click');//自动触发click,选中态

if(typeof(success_callback) == 'function'){

success_callback(arr);

}else{

//alert('callback err');

}

});

// 文件上传失败，现实上传出错。

uploader.on( 'uploadError', function( file ) {

var $li = $( '#'+file.id ),

$error = $li.find('div.error');

// 避免重复创建

if ( !$error.length ) {

$error = $('

}

$error.text('上传失败');

});

// 完成上传完了，成功或者失败，先删除进度条。

uploader.on( 'uploadComplete', function( file,data ) {

//$( '#'+file.id ).find('.progress').remove();

});

//获取上传状态

uploader.on('all', function (type) {

if (type === 'startUpload') {

state = 'uploading';

} else if (type === 'stopUpload') {

state = 'paused';

} else if (type === 'uploadFinished') {

state = 'done';

}

if (state === 'uploading') {

$up_btn.text('暂停上传');

} else {

$up_btn.text('开始上传');

}

});

if(is_auto == true){ //自动上传时隐藏开始上传按钮

$up_btn.hide();

}

else{

$up_btn.on('click', function () {

if (state === 'uploading') {

uploader.stop();

} else {

uploader.upload();

}

});

}

});