简单异步上传
上传图片:
【优点】异步上传,不会刷新页面;兼容各种平台、各种浏览器,不像flash有平台限制;
【缺点】实现进度条稍微有些麻烦(需要另外通过js查询服务端进度)。
客户端
【说明】关键是使用 iframe 技术,将 form 的 target 属性指向 iframe,实际是通过 iframe 上传。
上传完毕,通过 iframe 中的 js 脚本,将上传结果返回给主页面显示。

	        <form action="#{uploadLink}" id="myForm" name="myForm" enctype="multipart/form-data" method="post">
    	        <div>
    		        上传图片:<input type="file" id="myFile" name="myFile"/>
    	        </div>
    	        <iframe name="frmUpload" id="frmUpload" style="display:none"></iframe>
                <div id="fileStatus"></div>
            </form>
        
js 脚本:
        _run(function () {

            $('#myFile').change(function () {

                $('#myForm').attr( 'target', 'frmUpload'); // 关键:将 form 的 target 属性指向 iframe
                $('#fileStatus').html('<img src="~img/ajax/ajaxloading.gif" />');
                $('#myForm').submit();
            });

        });

        // 上传完毕,供 iframe 调用
        function showPic(picUrl) {
            $('#fileStatus').html('<img src="' + picUrl + '" />');
            $('#myForm')[0].reset();

            // 如果这个表单还要提交内容,那么最好重置它的target
            $('#myForm').attr('target', '_self');
        }
        
服务端:
        public void FrameUpload() {
            set( "uploadLink", to( FrameSave ) ); // 接受上传的网址
        }

        public void FrameSave() {

            logger.Info( "iframe upload" );

            Result result = Uploader.SaveImg( ctx.GetFileSingle() );
            String picName = result.Info.ToString(); // 获取图片名称
            String picUrl = strUtil.Join( sys.Path.Photo, picName ); // 获取图片完整路径
            picUrl = Img.GetThumbPath( picUrl, ThumbnailType.Medium ); // 获取中等缩略图

            // 这里的内容返回给 iframe
            StringBuilder sb = new StringBuilder();
            sb.Append( "<script>" );
            // 这段内容在iframe中,所以通过 parent 来调用主页面的方法
            sb.Append( "parent.showPic('" + picUrl + "')" );
            sb.Append( "</script>" );

            echoText( sb.ToString() );
        }