當前位置:首頁 » 文件管理 » js上傳文件大小

js上傳文件大小

發布時間: 2022-12-28 12:03:17

❶ js怎麼判斷上傳文件的大小

HTML中input標簽有個類型是file。這個是可以上傳文件使用的。你可以直接操作這個標簽的size來獲取文件的大小。
可通過下面的方式
html代碼:

js代碼:
varfileId="uploadtest";
vardom=document.getElementById(fileId);
varfileSize=dom.files[0].size;//文件的大小,單位為位元組B

❷ js文件上傳中遇到的知識點

在前端開發中,我們經常遇到上傳文件的需求,以前都是用到時再找資料,但總是感覺對這塊不熟,最近翻資料學習了一下,記錄一下。

本文中涉及的知識點有:FileList對象,Blob對象,File對象,URL對象、FormData對象等。

本文參考 網道 ,總結而來。另外,強烈推薦網道,可以去 網道的官方 看看,是阮一峰大神發起的項目,提供互聯網開發文檔,文檔非常全面易懂。

FileList對象,是一個像數組的對象,擁有length屬性和item()方法,同時,它的每一項都是File對象。

input 標簽,將type設為file,之後得到的files屬性就是一個FileList對象。

blob 對象表示1個二進制文件的數據內容。blob對象和arraybuffer區別是,blob對象用於操作二進制文件,arraybuffer用於操作內存。

blob 對象擁有2個屬性和1個方法,分別是size(單位是位元組)、type屬性和slice()方法。

File 對象是一種特殊的Blob 對象。它在繼承了size、type屬性外,還同時有name、lastModified、lastModifiedDate等幾個屬性。

FileList 對象中的每一項都是File 對象。

拿到File 對象之後就要進行操作,下面是操作。

URL.createObjectURL(file) 允許為File 對象創建一個臨時鏈接,

FileReader 對象的屬性和方法比較多,屬性中比較重要的是result,方法中比較重要的是

FileReader 對象的所有屬性和方法可以參考 這里 ,這里就不再列出來了。

在早期的互聯網時候,提交數據都是用表單。表單提交數據有些缺陷,例如無法校驗表單數據,會刷新整個頁面等。隨著Ajax的興起,頁面表單提交數據慢慢退出歷史舞台,但有時上傳文件時我們偶爾會用到表單提交數據。

在調用構造函數new FormData(form)構造formdata對象時需要傳入form節點,如果不傳入,則默認構建空表單。如果傳入,則按照key=value的時候構建表單。

可以看看效果圖

FormData 對象主要的方法有:

cavas壓縮圖片其實很簡單,無非就是幾個步驟:
1、選擇圖片,判斷圖片是否大於2M(用File對象的size進行判斷,size的單位是位元組);
2、用FileReader對象讀取文件成base64,
3、然後創建Image對象,賦值src屬性,在Image對象載入完成的回調里創建cavas並繪制圖片(根據圖片是否大於2M動態調整畫布大小);
4、將cavas轉成blob,拼在formdata中用ajax上傳。

這篇文章到這里也就結束了,這篇文章包含了一些瀏覽器中提供的對象,可以看到都是很簡單的內容。

❸ 怎麼在js 裡面限制上傳圖片的大小不能超過 1M

這樣設置的:

1、先用form標簽創建一個上傳的表單。

<formid="form1"name="form1"method="post"action=""enctype="multipart/form-data">
<p><inputtype="hidden"name="MAX_FILE_SIZE"value="100000"/></p>
<p><inputname="userfile"id="userfile"type="file"onchange="check()"/></p>
</form>


2、用javascript設置格式和大小。

<scriptlanguage="JavaScript"type="text/javascript">functioncheck(){varaa=document.getElementById("userfile").value.toLowerCase().split('.');//以「.」分隔上傳文件字元串//varaa=document.form1.userfile.value.toLowerCase().split('.');//以「.」分隔上傳文件字元串if(document.form1.userfile.value==""){alert('圖片不能為空!');returnfalse;}else{if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'
||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判斷圖片格式{varimagSize=document.getElementById("userfile").files[0].size;alert("圖片大小:"+imagSize+"B")if(imagSize<1024*1024*1)alert("圖片大小在1M以內,為:"+imagSize/(1024*1024)+"M");returntrue;}else{alert('請選擇格式為*.jpg、*.gif、*.bmp、*.png、*.jpeg的圖片');//returnfalse;}}}</script>

圖片超過1M則不能上傳 如圖:

❹ 如何使用javascript限制文件上傳大小

$("#ms_upload_file").change(function(){

//檢驗非空和文件大小
if($(this).val() !== '' && checkSize(this)) { //其他操作
}
});/**
* 函數:檢查上傳文件大小
* 輸入:input的js對象
* 輸出:
**/function checkSize(input) {
var Sys = {}; var flag; var filesize = 0; //判斷瀏覽器種類
if (navigator.userAgent.indexOf("MSIE") > 0) {
Sys.ie=true;
} if (navigator.userAgent.indexOf("Firefox")>0) {
Sys.firefox=true;
} //獲取文件大小
if (Sys.firefox) {
filesize = input.files[0].size;
} else if (Sys.ie){ var fileobject = new ActiveXObject ("Scripting.FileSystemObject");//獲取上傳文件的對象
var file = fileobject.GetFile (input.value);//獲取上傳的文件
filesize = file.Size;//文件大小
} //判斷是否符合要求
if (filesize / (1024 * 1024) < 5 ) {
flag = true;
} else {
alert("附件過大,建議不要超過5M!");
flag = false;
} return flag;
}

❺ js 如何獲取上傳文件的大小

HTML中input標簽有個類型是file。這個是可以上傳文件使用的。你可以直接操作這個標簽的size來獲取文件的大小。
可通過下面的方式
html代碼:
js代碼:
varfileId="uploadtest";
vardom=document.getElementById(fileId);
varfileSize=dom.files[0].size;//文件的大小,單位為位元組B

❻ 瀏覽器會限制js上傳文件大小嗎

瀏覽器是不會限制js上傳文件的大小的,但是js代碼可以控制
因為上傳操作是代碼處理的瀏覽器不會自動幫你上傳文件

❼ 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上傳文件大小嗎

瀏覽器是不會限制js上傳文件的大小的,但是js代碼可以控制

❾ IE8以上,用js獲取上傳文件大小和絕對路徑的實現代碼

js實現獲取文件大小:
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);
}
}
js實現獲取絕對路徑:

function readFile(fileBrowser) {
if (navigator.userAgent.indexOf("MSIE") != -1) {
return getFilePath(fileBrowser);
} else if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Mozilla") != -1) {
return getFilePathWithFF(fileBrowser);
} else {
return;
}
}
function getFilePath(fileBrowser) {
alert("ie");
alert(fileBrowser.value);

}
function getFilePathWithFF(fileBrowser) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch(e) {
alert('由於瀏覽器安全問題 請按照以下設置 [1] 地址欄輸入 "about:config" ; [2] 右鍵 新建 -> 布爾值 ; [3] 輸入 "signed.applets.codebase_principal_support" (忽略引號).');
return;
}
var fileName = fileBrowser.value;
alert("firefox");
alert( fileName);
}

❿ 關於js對上傳文件大小的限制

你用的是if,結束是continue。你讓後面的怎麼執行?

if的並列是

if(){
//代碼
}
elseif(){
//代碼
}else{
//代碼
}
熱點內容
dhcp伺服器租用其IP地址 發布:2025-08-23 09:02:33 瀏覽:4
android列印時間 發布:2025-08-23 09:02:32 瀏覽:373
p30哪個配置銷量大 發布:2025-08-23 08:53:10 瀏覽:914
liunxsvn創建文件夾 發布:2025-08-23 08:23:11 瀏覽:739
日文解壓 發布:2025-08-23 08:02:24 瀏覽:629
街籃二蘋果怎麼和安卓玩游戲 發布:2025-08-23 07:56:47 瀏覽:64
linuxh3c 發布:2025-08-23 07:39:25 瀏覽:159
免費電腦主機伺服器 發布:2025-08-23 07:39:21 瀏覽:596
js是解釋執行還是編譯執行 發布:2025-08-23 07:24:23 瀏覽:529
vb循環腳本 發布:2025-08-23 07:18:31 瀏覽:745