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

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

1.html

 <form name="fjUploadForm" enctype="multipart/form-data" method="post"

        action="fjFileInsert.action" onsubmit="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" onload="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' onclick='delFj(this);'/></li>");

}

function deTr(obj){

 $(obj).parent().parent().remove();

}