【优点】异步上传,不会刷新页面;兼容各种平台、各种浏览器,不像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() );
}