实现单文件上传,页面局部刷新

实现单文件上传,页面不刷新

1.html


 <form name="fjUploadForm" enctype="multipart/form-data" method="post"
        action="fjFileInsert.action" οnsubmit="return check()" target="fjUploadIFrame">
   <input type="file" name="doc" value=""/>
   <input type="submit" class="ybtn2" value="上传" />
</form>
<iframe id="fjUploadIFrame" name="fjUpload"   style= "display:none" οnlοad="iframeOnLoad();" ></iframe>
<ul id="fj" class="fileList">

</ul>

fjFileInsert.action执行文件上传,然后返回数据到upLoad.html页面,upLoad.html页面在iframe中隐藏起来
当执行完毕,iframe会重新加载,这时触发iframe的onload事件,在onload事件中,处理一些后续的操作

2.upLoad.html
<input id="result" name="result" value="${model.message?default('')},${model.id?default('')},${model.fileName?default('')}"></input>


3.js

//防止在第一次触发iframe的onload事件
var doFlag = false;

//判断是否选择了需要上传的文件
function check(){
 var file=document.forms["fjUploadForm"].doc;
 if(file.value==""){
  alert("请选择要上传的文件!");
  file.focus();
  return false;
 }
 doFlag = true;
 return true;
}

//文件上传完毕后,触发iframe的onload事件,根据返回值,做一些后续的处理
function iframeOnLoad(){
    if(doFlag){
 var doc = window.frames["fjUploadIFrame"].document;
 var text = doc.getElementById("result").value;
 var arr = text.split(',');
 var msg = arr[0];
 if(msg == "1"){
     alert("附件上传成功!");
 AddLi("fj",arr[1],arr[2])
 }else if(msg == "2"){
  alert("上传的最大限制为[50MB]!\r\n上传失败!");
 }else if(msg=="3"){
  alert("上传的文件不存在,或文件输入格式有误!\r\n上传失败!");
 }
 else if(msg=="4"){
  alert("上传的文件小于0kb,为空文件,请从新选择!");
 }
 doFlag = false; 
    }
}

//getContent.action实现文件的下载
function AddLi(targetId,id,name){
 $("#"+targetId).append("<li><input type='hidden' value='"+id+"'><input type='hidden' value='"+name+"'><a href='${base}/getContent.action?id="+id+"' class='btn'>"+name+"</a><img src='page8/images/icon/del.gif' οnclick='delFj(this);'/></li>");
}

function deTr(obj){
 $(obj).parent().parent().remove();
}

             

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值