无页面刷新上传文件

如果看不到截图,请访问我的博客:http://cxlh.blogcn.com

本想利用AJAX实现无刷新文件上传,后来发现不易实现,在网上找了很久,终于找到一个“伪AJAX”的实现方式,现在发出来我实际的代码,一飨读者。
首先我们需要一个上传的HTML或者JSP文件,如下:
<FORM METHOD="POST" ACTION="../servlet/FileUploadServlet" enctype="multipart/form-data" target="hidden_frame" onSubmit="showmsg();" style="margin:0;padding:0">
<input type="file" name="sfile" style="width:450">
<input type="hidden" name="act" value="upload">
<INPUT type="submit" value="上传文件"><span id="msg"></span>
<br/>
<font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>
<iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
</form>
其中FORM的TARGET属性非常重要,把FORM的ACTION提交到一个隐藏的IFRAME中去执行,然后返回的时候在MSG的地方填入操作即可,SERVLET的类似代码如下:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException{
PrintWriter out = response.getWriter();
response.setCharacterEncoding("utf-8";
response.setHeader("Charset","utf-8";
response.setHeader("Cache-Control", "no-cache";

String filepath="",msg="",ext="";
SmartUpload su = new SmartUpload();
boolean succ=true;
。。。。。。
try{
su.initialize(getServletConfig(),request,response);
su.setMaxFileSize(102400000);
su.setTotalMaxFileSize(102400000);
su.setAllowedFilesList(mediaExt+","+flashExt+","+imgExt);
su.setDeniedFilesList("exe,bat,,";
su.upload();
for (int i=0;i<su.getFiles().getCount();i++)
{
com.jspsmart.upload.File file = su.getFiles().getFile(i);

if (file.isMissing()) continue;

String fileName=UploadFileUtils.returnRandomFileName(file.getFileExt());
ext=file.getFileExt().toLowerCase();
。。。。。。。。。。。

msg="<a href=/"#/">上传成功!</a>";
}
}catch(SmartUploadException sue){
succ=false;
msg="<font color=red>上传失败:请检查文件扩展名或文件大小!</font>";
}catch(Exception ex){
succ=false;
msg="<font color=red>上传失败:请检查文件扩展名或文件大小!</font>";
ex.printStackTrace();
}
msg=Escape.escape(msg);
if(succ)
out.println("parent.document.getElementById('msg').innerHTML = unescape('"+msg+"');parent.backCallIframe('"+Escape.escape(ext)+"','"+Escape.escape(filepath)+"')";
else
out.println("parent.document.getElementById('msg').innerHTML = unescape('"+msg+"');";
out.close();
}
最后的上传中的效果如下:

上传成功后的自动提示上传成功或者提示上传失败并提示上传失败造成的原因。
页面不会有任何刷新,如有什么意见,请发表评论,谢谢。
个人感觉这个效果非常不错而且非常实用。
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值