js驗證上傳文件
主要正則寫的不對
<input id="txt_bpice" type="file" /><input id="Button2" type="button" value="button" language="javascript" onclick="return Button1_onclick()" />
<script type="text/javascript">
function Button1_onclick() {
var txt_bpice=document.getElementById("txt_bpice");
var b=/\w+([.jpg|.png|.gif|.swf|.bmp|.jpeg]){1}$/;
var t_value=txt_bpice.value.toLowerCase() ;
var a=b.test(t_value);
alert(a);// ie=True ff=false;
}
</script>
『貳』 上傳文件前先用js判斷有沒有選擇文件
首先判斷判斷 :document.getElementById("youFileCtl").value!="";就可以判斷有沒有選擇文件了。
『叄』 js怎麼驗證上傳的文件是excel
一般在js獲取文件上傳路徑,然後得到文件後綴,然後根據後綴進行判斷。
『肆』 利用 JS在客戶端判斷文件上傳的真實格式(獲取文件後綴的朋友就不要回答了) 急!
你在谷歌瀏覽器打開控制台,輸入document.getElementById('file').files,這個方法也可以用來獲取文件的大小,如果file有選擇文件的話會顯示filelist會有type出現,不過我試了一下,效果跟獲取文件後綴名差不多,而且前端驗證很容易欺騙,安全性考慮都會在後端重新驗證。
『伍』 ie7和ie8如何在不支持ActiveX的情況下通過js驗證上傳文件大小
思路是img標簽中的dynsrc屬性。
在FireFox、Chrome瀏覽器中可以根據document.getElementById(「id_file」).files[0].size 獲取上傳文件的大小(位元組數),而IE瀏覽器中不支持該屬性,只能藉助<img>標簽的dynsrc屬性,來間接實現獲取文件的大小(但需要同意ActiveX控制項的運行,但是不會引起上面的不友好、不安全的提示)。
參考如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="DEscription" contect="my code demo" /> <meta name="Author" contect="[email protected]" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js check file size </title> </head> <body> <img id="tempimg" dynsrc="" src="" style="display:none" /> <input type="file" name="file" id="fileuploade" size="40" /> <input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/> </body> <script type="text/javascript"> var maxsize = 2*1024*1024;//2M var errMsg = "上傳的附件文件不能超過2M!!!"; var tipMsg = "您的瀏覽器暫不支持計算上傳文件的大小,確保上傳文件不要超過2M,建議使用IE、FireFox、Chrome瀏覽器。"; var browserCfg = {}; var ua = window.navigator.userAgent; if (ua.indexOf("MSIE")>=1){ browserCfg.ie = true; }else if(ua.indexOf("Firefox")>=1){ browserCfg.firefox = true; }else if(ua.indexOf("Chrome")>=1){ browserCfg.chrome = true; } function checkfile(){ try{ var obj_file = document.getElementById("fileuploade"); if(obj_file.value==""){ alert("請先選擇上傳文件"); return; } var filesize = 0; if(browserCfg.firefox || browserCfg.chrome ){ filesize = obj_file.files[0].size; }else if(browserCfg.ie){ var obj_img = document.getElementById('tempimg'); obj_img.dynsrc=obj_file.value; filesize = obj_img.fileSize; }else{ alert(tipMsg); return; } if(filesize==-1){ alert(tipMsg); return; }else if(filesize>maxsize){ alert(errMsg); return; }else{ alert("文件大小符合要求"); return; } }catch(e){ alert(e); } } </script> </html>
『陸』 js怎麼判斷上傳文件的大小
HTML中input標簽有個類型是file。這個是可以上傳文件使用的。你可以直接操作這個標簽的size來獲取文件的大小。
可通過下面的方式
html代碼:
js代碼:
varfileId="uploadtest";
vardom=document.getElementById(fileId);
varfileSize=dom.files[0].size;//文件的大小,單位為位元組B
『柒』 js文件上傳驗證文件類型第一個為文本,第二個為MP3格式,第三個為jpg 如何動態驗證求解
下面是一個完整的HTML文檔,你可以復制後進行直接測試。
代碼中有必要的注釋:
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>文件類定義</title>
</head>
<body>
<formmethod=postname=upformaction=""enctype="multipart/form-data">
<divid="file"style="margin-top:60px;width:auto;hegiht:auto;"></div>
<ahref="javascript:void(0)"onclick="addUpload()">添加附件</a>
<spanclass="required">語音文件</span>
<inputname="btn_up"class="cmd"type="button"id="btn_up"value="上傳"style="cursor:hand"onclick="ajaxFileUpload(this.form,this.form.txt1.value)">
</form>
<scripttype="text/javascript">
varcount=0;
varmaxfile=3;
//增加元素
functionaddUpload(){
if(count>=maxfile)return;//限制最多maxfile個文件框
count++;
//自增id不同的HTML對象,並附加到容器最後
varnewDiv="<divid=divUpload"+count+">"
+"請選擇上傳的音頻,圖片,或文字,第"+count+"幀"
+"<br/>"
//下面的每一個input中,都加入了onchange事件,用以在選擇完新文件後對其進行判斷
//同時第二參數用以限定本輸入框中的文件類型
+"文本:<inputname=txt"+count+"type=filemaxlength=30style=width:60%onchange='confirmType(this,"txt")'/><br/>"
+"圖片:<inputname=img"+count+"type=filemaxlength=30style=width:60%onchange='confirmType(this,"img")'/><br/>"
+"MP3:<inputname=voice"+count+"type=filemaxlength=30style=width:60%onchange='confirmType(this,"voice")'/><br/>"
+"<inputtype=buttonvalue=刪除onclick=delUpload('divUpload"+count+"')/>"
+"</div>";
document.getElementById("file").insertAdjacentHTML("beforeEnd",newDiv);
}
functionconfirmType(th,ty){
varv=th.value;
if(ty=='txt'&&/.txt$/i.test(v)){//如果是文本框
th.style.color='#090';//正確為綠色顯示
}elseif(ty=='img'&&/.jpg$/i.test(v)){//如果是圖片框
th.style.color='#090';//正確為綠色顯示
}elseif(ty=='voice'&&/.mp3$/i.test(v)){//如果是MP3框
th.style.color='#090';//正確為綠色顯示
}else{
th.style.color='#F00';//錯誤為紅色顯示
alert('您所選擇的文件類型不正確');
}
}
</script>
</body>
</html>
『捌』 js如何上傳文件
js採用File API 來上傳文件的。
File API 由一組 JavaScript 對象以及事件構成。賦予開發人員操作在 <input type=」file」 … /> 文件選擇控制項中選定文件的能力。圖 1 展示了 File API 所有的 JavaScript 的組合關系。
File API 簡單示例
<body>
<h1>File API Demo</h1>
<p>
<!-- 用於文件上傳的表單元素 -->
<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();">
<p>Upload File: <input type="file" name="file" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div>Progessing (in Bytes): <span id="bytesRead">
</span> / <span id="bytesTotal"></span>
</div>
</p>
</body>
運行效果:
『玖』 用JS怎麼判斷上傳文件控制項是否未選擇文件
這是html代碼
<form name="form1" action="uploadPosdetailFile.html" method="post" ENCTYPE="multipart/form-data">
<div class="form" >
<p>
<span class="req"><input id="startDateTxt" name="startDateTxt" class="field size4" title="Enter the date" /></span>
<label>Start Date: <span>(Date format:MM/dd/yyyy,eg:01/01/2014)</span></label>
</p>
<p>
<span class="req"><input id="endDateTxt" name="endDateTxt" class="field size4" title="Enter the date" /></span>
<label>End Date: <span>(Date format:MM/dd/yyyy,eg:12/25/2014)</span></label>
</p>
<p>
<span class="req"><input type="file" name="uploadFileCtrl" class="field size4" title="Choose the file" /></span>
<label>Upload file: <span>(click browse to choose)</span></label>
</p>
</div>
<div class="buttons">
<input id="queryBtn" type="button" class="button" value="Submit" />
</div>
</form>
下面是驗證,jquery寫的
$("#queryBtn").click(
function(){
......
var s=document.form1.uploadFileCtrl.value;
if(s==""){
alert("Please choose a posdetail file.");
document.form1.uploadFileCtrl.focus();
return;
}
showLoadingWnd('Uploading,please wait...');
document.form1.submit();
}
);
『拾』 js檢驗上傳文件是否存在
判斷客戶端文件時,可以用 var fso,s=filespec; // filespec="C:/path/myfile.txt" fso=new ActiveXObject("Scripting.FileSystemObject"); if(fso.FileExists(filespec)) s+="文件存在."; else s+="文件不存在."; alert(s); 判斷伺服器端(網...