實現單文件上傳,頁面局部刷新

實現單文件上傳,頁面不刷新

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();
}