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

phpcms系统v9版本目前使用的仍然是SWFUpload这个上传组件,该组件是基于flash的,在新一代浏览器中已经不被支持。因此本文将PHPCMS V9版本的SWFUpload上传控件替换为webuploader组件。

SWFUpload目录结构如下:

├── fileprogress.js

├── handlers.js

├── images

│   ├── cross.png

│   ├── off.png

│   └── swfBnt.png

├── swf2ckeditor.js

├── swfupload.css

├── swfupload.js

├── swfupload.swf

├── swfuploadbutton.swf

└── unpack_swfupload.js

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。

 

关于SWFUpload的具体文件作用不再赘述,本文主要介绍webuploader控件的使用。下面是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>


转载

webuploader.zip

http://www.99xq.cn/php/239.html