javascrip クライアントはファイルサイズとファイルタイプを確認し、upload_form 効果をリセットします。-jsチュートリアル-php.cn

javascrip クライアントはファイルサイズとファイルタイプを確認し、upload_form 効果をリセットします。

WBOY

リリース： 2016-05-16 18:12:03

オリジナル

845 人が閲覧しました

以下は、私が作成した一般的な JavaScript スクリプトです。呼び出し時に割り当てる必要があるパラメーターは数多くありますが、それらはすべて実際のニーズで実際に必要なものです。それを参照して、必要なスクリプトに変更できます。

コードをコピーコードは次のとおりです:

/*****ファイル情報の取得 zhaogw による編集 misssionOtherAttEdit.jsp による参照 ****/
/*file: input type="file" オブジェクト。通常はこれを使用します。
vType: ファイルのファイルタイプ情報を記録するために使用されるオブジェクト名。通常、これは入力オブジェクトです。
DivType: Div オブジェクトの名前。ファイルタイプ情報を表示するには、その innerHTML コンテンツを使用します。
vFile: ファイルのファイル名情報を記録するために使用されるオブジェクト名。通常、これは入力オブジェクトです。
DivFile: Div オブジェクトの名前。その innerHTML コンテンツを使用して、ファイルのファイル名情報を表示します。
vSize、DivSize は上記と似ていますが、ファイルのサイズ情報のみを記録します。
mMaxSize: アップロードできる最大ファイルサイズを m 単位で計算します。
allowType: 受け入れられるファイルタイプのみ
*/
function getFileInfo(file,mMaxSize,allowType,vFile,DivFile,vType,DivType,vSize,DivSize){
var filePath = file.value / /ファイルパス
var fileName;//ファイル名
var fileType;//ファイルタイプ
var tmpObj;//一時オブジェクト
var notAllowType=new Array("exe","bat" , "asp","jsp","js","dll");
var mHTML=document.getElementById(file.name 'Td').innerHTML;
/*
var mHTML=" < ;input type='file' name='"
file.name "' class='input100' id='" file.id
"' Tip='空のファイルをアップロードできません' contentEditable='false' tmt:required='true' focusTips='ファイル名を入力してください' onChange='getFileInfo(this,"
mMaxSize ","" allowedType "","" vFile "","" DivFile "","" vType "","" DivType "","" vSize "","" DivSize "")'>";
*/
//alert(mHTML);
// ファイル名を取得
if(filePath != null && filePath != ''){
var pass=true;
//ファイルタイプ
fileType = filePath.substring(filePath.lastIndexOf('.') 1 , filePath.length);
if (fileType!=null&&fileType!='')
{
for (var i in notAllowType){
if (fileType.toLowerCase()==notAllowType[i ] ){
pass=false;
break;}
}
}
//許可されるタイプ (空の場合、許可されるタイプは設定されません)
var match=false ;
if (allowType!=null&&allowType!=''){
varallowList=allowType.split('|');
for (allowList の var j){
if (fileType.toLowerCase ()==allowList[j].toLowerCase()){
match=true;
break;}
}
} else {match=true;}
if (pass&&match)
{
fileName = filePath.substring(filePath.lastIndexOf('\') 1,filePath.length);
tmpObj=document.getElementById(vType);
if (tmpObj!=null); 🎜>tmpObj.value = fileType;
tmpObj=documentById(DivType);
if (tmpObj!=null)
tmpObj=documentById(vFile) ;
if (tmpObj!=null)
tmpObj.value = ファイル名;
tmpObj=document.getElementById(DivFile);
if (tmpObj!=null)
tmpObj.innerHTML = ファイル名;
try{
var fso,f,s;
fso = new ActiveXObject("Scripting.FileSystemObject"); f.Size > ; mMaxSize*1048576){
alert("ファイルサイズは mMaxSize "M");
document.getElementById(file.name 'Td').innerHTML = mHTML; =document.getElementById (vType);
if (tmpObj!=null)
tmpObj.value = '';
tmpObj=document.getElementById(DivType);
tmpObj .innerHTML = '';
tmpObj=document.getElementById(vFile);
if (tmpObj!=null)
tmpObj=documentById (DivFile);
if (tmpObj!=null)
tmpObj.innerHTML = '';
if (tmpObj!=null)
tmpObj .value = ' ';
tmpObj=document.getElementById(DivSize);
if (tmpObj!=null)
return;
else
{
tmpObj=document.getElementById(vSize);
if (tmpObj!=null)
tmpObj.value = f.Size;
tmpObj=document.getElementById(DivSize);
if (tmpObj!=null)
tmpObj.innerHTML = f.Size " byte (byte)";
var imgType=new Array("jpg","jpeg","gif","bmp) ");
var isImg=false;
//ファイルタイプ
if (fileType!=null&&fileType!='')
{
for (var k in imgType){
if (fileType .toLowerCase()==imgType[k]){
isImg=true;
break;}
}
}
var tmpObj=document.getElementById("imgView") ;
if (isImg&&tmpObj){
var y = document.getElementById(file.name "img");
if(y){
y.src = "file://localhost/" file.value ;
}else{
var img=document.createElement("img");
img.setAttribute("src","file://localhost/" file.value); 🎜>img .setAttribute("幅","120");
img.setAttribute("高さ","90");
img.setAttribute("id",file.name "img");
tmpObj.appendChild(img);
}
}}
}catch(e){
//ignore
}
}
else if (!pass ) {alert ("ファイルの種類はアップロードできません: " fileType);document.getElementById(file.name 'Td').innerHTML = mHTML;}
else if (!match) {alert("Onlyファイルの種類はアップロードが許可されています:" "allowType);document.getElementById(file.name 'Td').innerHTML = mHTML;}
}
}

メソッドを呼び出すコード:

コードをコピーコードは次のとおりです:

< ;td width="23%" class="inputTd" id="fileNameTd"colspan="3">

を表示する必要があります現在アップロードされている画像次のコードを追加します:

スクリプトの関連する規約を簡単に説明します。 >1: 必要に応じてオブジェクト (または入力 type="file" オブジェクトを含める innerHTML 属性を持つ他のオブジェクトを使用します。名前は入力の名前属性 "Td" をサフィックスとして使用する必要があります)
2:これ以上パラメータを追加したくないため、imgView はハードコーディングされているため、ここで修正します。名前をパラメータとして渡すこともできます。それはあなたの都合次第です。
3: すべてのパラメータは '' にすることができますが、最初のパラメータは基本的にこれです。スクリプトは関連するパラメータを自動的に決定します。