Implement single file upload and partial page refresh_html/css_WEB-ITnose

Achieve single file upload without page refresh

1.html

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

fjFileInsert.action executes the file upload, and then returns the data to the upLoad.html page. The upLoad.html page is hidden in the iframe.
When the execution is completed, the iframe will reload, and the onload of the iframe is triggered. event, in the onload event, handle some subsequent operations

2.upLoad.html



3.js

//Prevent the iframe’s onload event from being triggered for the first time
var doFlag = false;

//Determine whether the file that needs to be uploaded is selected
function check(){
var file=document.forms["fjUploadForm"].doc;
if(file.value==""){
alert("Please select the file to upload! ");
file.focus();
return false;
}
doFlag = true;
return true;
}

//File upload completed After that, trigger the onload event of the iframe, and do some subsequent processing according to the return value
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("Attachment uploaded successfully!");
AddLi("fj",arr[1],arr[2])
}else if(msg == "2 "){
alert("The maximum upload limit is [50MB]! rn upload failed!");
}else if(msg=="3"){
alert("The uploaded file does not Exists, or the file input format is incorrect! rnUpload failed! ");
}
else if(msg=="4"){
alert("The uploaded file is less than 0kb and is an empty file. Please choose again! ");
}
doFlag = false;
}
}

//getContent.action to implement file download
function AddLi(targetId,id ,name){
$("#" targetId).append("

• " name "
");
}

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