ホームページ  >  記事  >  ウェブフロントエンド  >  単一ファイルのアップロードと部分ページのrefresh_html/css_WEB-ITnoseの実装

単一ファイルのアップロードと部分ページのrefresh_html/css_WEB-ITnoseの実装

WBOY
WBOYオリジナル
2016-06-24 11:51:401237ブラウズ

ページを更新せずに単一ファイルのアップロードを実現

1.html


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




< ; ul id="fj" class="fileList">

fjFileInsert.action はファイルのアップロードを実行し、データを upLoad.html ページに返します。upLoad.html ページは、 iframe
実行後、iframe が再読み込みされます。このとき、onload イベント内で後続の操作がいくつか処理されます

2.upLoad.html


3 .js

// iframe の onload イベントが初めてトリガーされないようにします
var doFlag = false;

// アップロードする必要があるファイルが選択されているかどうかを判断します
関数チェック(){
var file=document.forms["fjUploadForm "].doc;
if(file.value==""){
alert("アップロードするファイルを選択してください!");
file.focus() ;
return false;
}
doFlag = true;
return true;
}

//ファイルがアップロードされた後、iframe の onload イベントをトリガーし、戻り値に基づいて後続の処理を実行します
関数 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】です! rnアップロードに失敗しました! ");
}else if(msg=="3"){
alert("アップロードされたファイルが存在しないか、ファイルの入力形式が間違っています!rn アップロードに失敗しました!");
}
else if(msg= =" 4"){
alert("アップロードされたファイルは 0kb 未満で空のファイルです。もう一度選択してください。");
}
doFlag = false
}
}

//getContent.action を実装します。ファイルダウンロード
function AddLi (targetId,id,name){
$("#"+targetId).append("

  • < input type='hidden ' value='"+name+"'>"+name+"< ;/a>
  • ");
    }

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