【优点】实时反映上传进度和速度,一目了然
【缺点】不是所有平台都兼容,比如 iPad 就不行
【注意】上传文件 "最大值" 受两个配置决定:
1) 网站根目录下的 /web.config 中的 <httpRuntime maxRequestLength="800000" />
2) 同时还要修改 /framework/config/site.config 中的 UploadPicMaxMB(图片最大上传值) 和 UploadFileMaxMB(文件最大上传值) 。可在综合系统后台 "网站配置" 中修改。
客户端
【说明】
1) 先在页面中放一个传统的上传控件(即type=file的控件)
2) 然后放两个容器div,一个显示进度条(即下面的uploadProgressBar),一个显示最终上传的统计结果(即下面的uploadResult)
3) 如果需要将上传的图片实时显示出来,还可以定义一个 imgList 容器
<div><input id="myFile" name="myFile" type="file" /></div>
<div id="uploadResult"></div>
<div id="uploadProgressBar"></div>
<div id="imgList"></div>
js 脚本:
_run(function () {
// 总共两个步骤——
// 1) 上传的配置信息
var cfg = wojilu.upload.getSettings();
cfg.uploader = '#{uploadLink}'.toAjax(); // 接受上传的网址
cfg.postData = #{authJson}; // 客户端验证信息(cookie等)
cfg.fileTypeExts = '*.jpg;*.gif;*.png;'; // 允许上传的文件类型
cfg.fileTypeDesc = 'Image Files'; // 选择框中文件类型描述
cfg.queueID = 'uploadProgressBar'; // 显示进度条的容器
// 推荐自定义上传处理结果
cfg.errors= '';
cfg.validCount = 0;
cfg.errorCount = 0;
// 每个文件上传成功之后在这里处理。data是服务端返回的数据。
cfg.onUploadSuccess = function (file, data, response) {
/* 如果是data是json类型数据,可以先eval然后处理*/
var obj = eval( '('+data+')');
/* 如果要查看json字符串,可以用 JSON.stringify( objJson ); */
// 记录错误
if( !obj.IsValid ) {
cfg.errors += obj.Msg + '
';
cfg.errorCount += 1; // 将错误上传次数+1
}
else {
cfg.validCount += 1; // 将正确上传的次数+1
// 其他自定义操作
$('#imgList').prepend( '<div style="margin:5px;"><img src="'+obj.Info+'" /></div>' );
}
};
cfg.onQueueComplete = function (data) {
/* 对自定义的上传结果进行汇总显示 */
var msg = cfg.validCount + ' 个文件上传成功. ';
if( cfg.errors.length>0 ) msg += '
' + cfg.errorCount + ' 个错误:
'+cfg.errors;
$('#uploadResult').html( msg );
// 重置上传数量
cfg.errors = '';
cfg.validCount = 0;
cfg.errorCount = 0;
/* 插件自带的处理结果(不推荐)
var msg = data.successful_uploads + ' 个文件上传成功. ';
if( data.upload_errors>0 ) msg += data.upload_errors + ' 个错误.';
$('#uploadResult').text( msg );*/
};
// 2) 将普通上传控件转化为 flash 上传控件
wojilu.upload.initFlash( '#myFile', cfg );
});
服务端:
public void FlashUpload() {
set( "uploadLink", to( FlashSave ) ); // 接受上传的网址
set( "authJson", ctx.web.GetAuthJson() );
// 如果有其他安全cookie,请指定。否则没有权限
//set( "authJson", ctx.web.GetAuthJson( "_cookieName" ) );
}
public void FlashSave() {
Result result = Uploader.SaveImg( ctx.GetFileSingle() );
if (result.HasErrors) {
echoError( result ); // 返回错误信息
return;
}
String picName = result.Info.ToString(); // 获取图片名称
String picUrl = strUtil.Join( sys.Path.Photo, picName ); // 获取图片完整路径
picUrl = Img.GetThumbPath( picUrl, ThumbnailType.Medium );// 获取中等缩略图
echoJsonMsg( "ok", true, picUrl ); // 将图片网址返回给客户端
}