本文介绍了一种基于WebUpload的自定义文件上传方法，通过封装JS代码实现了灵活的上传功能，包括多文件同时上传、自定义缩略图尺寸及接收对象等功能。
Webupload上传文件比较方便，但官方例子给得太含糊，demo中js也不好用。
在此，自己封装了个js，实现相对灵活的调用方式，抛砖引玉：
代码已在chrom，ie9以上测试通过。
注意，options设置了很多默认值，所以，在定义options时，一般情况下只需要定义个性的值即可，默认无需定义。若要修改，则增加相应的key:value 对即可。
JS源码：
/**
* 基于Webupload的文件上传 js V0.1
* 实现：
* 1、同一个页面实现多个单一文件上传同时存在
* 2、自定义缩略图尺寸
* 3、自定义上传成功后文件接收对象，缩略图显示对象等
* @author James，25708164@qq.com
* @date 2016-12-7
* @since jQuery 1.9以上， Webupload 0.1.5
* @param $
*/
jQuery.uploaderCustom = function(options){
var fileCount = 0; //添加文件总数
var dOptions = { //options 默认值设置
url:'',
fileNumLimit:10,
fileSizeLimit:200 * 1024 * 1024,
fileSingleSizeLimit:50 * 1024 * 1024,
uploaderId:'Uploader',
btnId:'btn_upload',
filePicker:'filePicker',
thumb:'thumb',
width:40,
height:40,
filePathId:'filePath',
fileList:'fileList',
srpp:'', //swf文件路径前段，
ctx:'', //上下文context
formData:{}, //其他参数
accept: { //上传文件格式限制
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
};
if(typeof(options.url)!='undefined'){
dOptions.url = options.url;
}
if(typeof(options.fileNumLimit)!='undefined'){
dOptions.fileNumLimit = options.fileNumLimit;
}
if(typeof(options.fileSizeLimit)!='undefined'){
dOptions.fileSizeLimit = options.fileSizeLimit;
}
if(typeof(options.fileSingleSizeLimit)!='undefined'){
dOptions.fileSingleSizeLimit = options.fileSingleSizeLimit;
}
if(typeof(options.uploaderId)!='undefined'){
dOptions.uploaderId = options.uploaderId;
}
if(typeof(options.btnId)!='undefined'){
dOptions.btnId = options.btnId;
}
if(typeof(options.filePicker)!='undefined'){
dOptions.filePicker = options.filePicker;
}
if(typeof(options.thumb)!='undefined'){
dOptions.thumb = options.thumb;
}
if(typeof(options.width)!='undefined'){
dOptions.width = options.width;
}
if(typeof(options.height)!='undefined'){
dOptions.height = options.height;
}
if(typeof(options.filePathId)!='undefined'){
dOptions.filePathId = options.filePathId;
}
if(typeof(options.fileList)!='undefined'){
dOptions.fileList = options.fileList;
}
if(typeof(options.srpp)!='undefined'){
dOptions.srpp = options.srpp;
}
if(typeof(options.ctx)!='undefined'){
dOptions.ctx = options.ctx;
}
if(typeof(options.formData)!='undefined'){
dOptions.formData = options.formData;
}
if(typeof(options.accept)!='undefined'){
dOptions.accept = options.accept;
}
console.debug(dOptions);
var $wrap = $('#'+dOptions.uploaderId); //上传容器对象
var $uploadBtn = $('#'+dOptions.btnId); //上传按钮对象
var $filePath = $('#'+dOptions.filePath); //上传文件路径结果接收对象
var $fileList = $('#'+dOptions.fileList); //缩略图显示对象
var $thumb = $('#'+dOptions.thumb); //缩略图值保存对象
// 优化retina, 在retina下这个值是2
var ratio = window.devicePixelRatio || 1;
// 缩略图大小
var thumbnailWidth = dOptions.width * ratio;
var thumbnailHeight = dOptions.height * ratio;
var state = 'pedding';
// 判断浏览器是否支持图片的base64
isSupportBase64 = ( function() {
var data = new Image();
var support = true;
data.onload = data.onerror = function() {
if( this.width != 1 || this.height != 1 ) {
support = false;
}
};
data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
return support;
} )();
//检测是否安装了Flash插件
flashVersion = ( function() {
var version;
try {
version = navigator.plugins[ 'Shockwave Flash' ];
version = version.description;
} catch ( ex ) {
try {
version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
.GetVariable('$version');
} catch ( ex2 ) {
version = '0.0';
}
}
version = version.match( /\d+/g );
return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
} )();
//判断是否支持Flash
if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {
if (flashVersion) {
(function(container) {
window['expressinstallcallback'] = function( state ) {
switch(state) {
case "Download.Cancelled" :
alert("安装被取消");
break;
case "Download.Failed" :
alert("安装失败");
break;
default:
alert('安装已成功，请刷新！');
break;
};
delete window['expressinstallcallback'];
};
var swf = dOptions.srpp+'/plugins/webupload/expressInstall.swf';
var html = '<object type="application/x-shockwave-flash" data="' + swf + '" ';
if (WebUploader.browser.ie) {
html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
}
html += 'width="100%" height="100%" style="outline:0">' +
'<param name="movie" value="' + swf + '" />' +
'<param name="wmode" value="transparent" />' +
'<param name="allowscriptaccess" value="always" />' +
'</object>';
container.html(html);
})($wrap);
// 压根就没有安转。
} else {
$wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
}
return;
} else if (!WebUploader.Uploader.support()) {
alert( 'Web Uploader 不支持您的浏览器！');
return;
}
var uploader;
//实例化uploader
uploader = WebUploader.create({
auto:false,
pick: '#'+dOptions.filePicker,
fileNumLimit: dOptions.fileNumLimit, //允许上传文件总数限制
fileSizeLimit: dOptions.fileSizeLimit, // 全部文件大小限制，最小单位KB
fileSingleSizeLimit: dOptions.fileSingleSizeLimit, // 单个文件大小限制，最小单位KB
swf: dOptions.srpp+'/plugins/webupload/Uploader.swf',
formData:dOptions.data,
runtimeOrder: 'flash',
chunked: false, //true为开启分片上传
server: dOptions.url, //向服务器发送请求的路径
method:'POST',
accept: dOptions.accept, //定义可发送的文件后缀 minetype等
thumb: { //自动生成缩略图
width: thumbnailWidth,
height: thumbnailHeight,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: true,
// 是否允许裁剪。
crop: true,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: 'image/jpeg',
},
compress:{
width: thumbnailWidth,
height: thumbnailHeight,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 0
}
}).on('fileQueued', function( file ) {
/**
// 生成文件MD5信息，可用于文件在上传前后的MD5校验
this.md5File(file, 0, 1 * 1024 * 1024).progress(function(percentage) {
}) .then(function(ret) {
});
**/
}).on('uploadSuccess',function(file,response){
// console.debug(response);
// console.debug(ctx+"/"+response.filePath);
$fileList.empty().html('<img src="'+dOptions.ctx+'/'+response.filePath+'" style="width:'+dOptions.width+'px;height:'+dOptions.height+'px;" class="img-circle" />');
$filePath.val(dOptions.ctx+'/'+response.filePath);
$uploadBtn.button('reset');
$uploadBtn.button('上传');
fileCount = 0;
}).on('uploadError',function(file,response){
$uploadBtn.button('reset');
$uploadBtn.button('上传');
fileCount = 0;
alert('上传文件失败');
});
uploader;
//当有文件添加进来是触发生成缩略图
uploader.onFileQueued = function( file ) {
fileCount ++;
uploader.makeThumb( file, function( error, ret ) {
if ( error ) {
$fileList.text('生成缩略图失败');
} else {
$thumb.val(ret);
$fileList.empty().html('<img src="' + ret +'" style="width:'+dOptions.width+'px;height:'+dOptions.height+'px;" class="img-circle" />');
}
});
};
//上传按钮click事件
$uploadBtn.on('click',function(){
if(fileCount>0){
$(this).button('loading');
uploader.upload();
}
});
};
页面调用：
<div id="Uploader" class="form-group">
<label class="col-sm-3 control-label">缩略图</label>
<div class="col-sm-5">
<span id="fileList" style="vertical-align:50%;margin-left:20px;" >最佳尺寸：80x80</span>
<span id="filePicker" class="form-inline" style="margin-left:20px;" >点击选择</span>
<input type="hidden" name="filePath" id="filePath"/> <!-- 上传成功后，接收回传新文件名 -->
<input type="hidden" name="thumb" id="thumb" />
<button id="btn_upload" type="button" class="btn btn-default form-inline" ><i class="glyphicon glyphicons-disk-open"></i>上传</button>
</div>
</div>
<script>
//---------- 初始化上传组件 begin--------------//
var uploadOptions ={
url:'${ctx}/upload/imageUpload',
fileNumLimit:10,
fileSizeLimit:20 * 1024 * 1024,
fileSingleSizeLimit:5 * 1024 * 1024,
width:80,
height:80,
srpp:'${srpp}', //swf文件路径前段，
ctx:'${ctx}', //上下文context
};
$.uploaderCustom(uploadOptions);
//---------- 初始化上传组件 end --------------//
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
