flash上传(带进度条)
【优点】实时反映上传进度和速度,一目了然
【缺点】不是所有平台都兼容,比如 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 ); // 将图片网址返回给客户端
        }