实现单文件上传,页面局部刷新_html/css_WEB-ITnose

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

1.html

 

        action="fjFileInsert.action" onsubmit="return check()" target="fjUploadIFrame">
  
  

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

2.upLoad.html

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("

"+name+"

");
}

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