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

├── Uploader.swf                      // SWF文件，当使用Flash运行时需要引入。

├── webuploader.js                    // 完全版本。
├── webuploader.min.js                // min版本

├── webuploader.flashonly.js          // 只有Flash实现的版本。
├── webuploader.flashonly.min.js      // min版本

├── webuploader.html5only.js          // 只有Html5实现的版本。
├── webuploader.html5only.min.js      // min版本

├── webuploader.withoutimage.js       // 去除图片处理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js   // min版本

下面是phpcms V9系统更换webuploader的替换文件,请点击下载即可:

swfupload上传控件更换为基于html5的webuploader组件

说一下这个文件结构:

├─phpcms
│ └─modules
│ └─attachment
│ └─templates
│ header.tpl.php
│ swfupload.tpl.php
│
└─statics
└─js
└─webuploader-0.1.5

解压后直接覆盖到phpcms根目录即可,其中PHP部分只修改了 swfupload.tpl.php文件, js新增了webuploader文件夹。通过前端实现了对上传功能的无痛替换。

下面对js逻辑代码做一些说明:

<script>
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 = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info" style="width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">' + file.name + '</div>' +
'</div>'
),
$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('<span>不能预览</span>');
}
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 = $('<p class="progress" style="color: red;height: 20px;"><span></span></p>')
.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('<a href="###" class=""></a>');//兼容老的交互选择方式
$('#'+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 = $('<div class="error"></div>').appendTo( $li );
}

$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();
}
});
}
});

</script>

还有不明白的可以加我微信(debug996)远程帮助解决。本修改方案由久久博客原创,转载务必注明出处http://www.99xq.cn/php/239.html