js限制上傳文件的大小
Ⅰ 如何在上傳圖片時在客戶端用js判斷圖片大小並彈出提示
參考：
<script language=javascript>
var ImgObj=new Image(); //建立一個圖像對象
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部圖片格式類型
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局變數 圖片相關屬性
//以下為限制變數
var AllowExt=".jpg|.gif" //允許上傳的文件類型 ŀ為無限制 每個擴展名後邊要加一個"|" 小寫字母表示
//var AllowExt=0
var AllowImgFileSize=70; //允許上傳圖片文件的大小 0為無限制 單位：KB
var AllowImgWidth=500; //允許上傳的圖片的寬度 ŀ為無限制 單位：px(像素)
var AllowImgHeight=500; //允許上傳的圖片的高度 ŀ為無限制 單位：px(像素)
HasChecked=false;
function CheckProperty(obj) //檢測圖像屬性
{
FileObj=obj;
if(ErrMsg!="") //檢測是否為正確的圖像文件 返回出錯信息並重置
{
ShowMsg(ErrMsg,false);
return false; //返回
}
if(ImgObj.readyState!="complete") //如果圖像是未載入完成進行循環檢測
{
setTimeout("CheckProperty(FileObj)",500);
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得圖片文件的大小
ImgWidth=ImgObj.width //取得圖片的寬度
ImgHeight=ImgObj.height; //取得圖片的高度
FileMsg="\n圖片大小:"+ImgWidth+"*"+ImgHeight+"px";
FileMsg=FileMsg+"\n圖片文件大小:"+ImgFileSize+"Kb";
FileMsg=FileMsg+"\n圖片文件擴展名:"+FileExt;
if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth)
ErrMsg=ErrMsg+"\n圖片寬度超過限制。請上傳寬度小於"+AllowImgWidth+"px的文件，當前圖片寬度為"+ImgWidth+"px";
if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight)
ErrMsg=ErrMsg+"\n圖片高度超過限制。請上傳高度小於"+AllowImgHeight+"px的文件，當前圖片高度為"+ImgHeight+"px";
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize)
ErrMsg=ErrMsg+"\n圖片文件大小超過限制。請上傳小於"+AllowImgFileSize+"KB的文件，當前文件大小為"+ImgFileSize+"KB";
if(ErrMsg!="")
ShowMsg(ErrMsg,false);
else
ShowMsg(FileMsg,true);
}
ImgObj.onerror=function(){ErrMsg='\n圖片格式不正確或者圖片已損壞!'}
function ShowMsg(msg,tf) //顯示提示信息 tf=true 顯示文件信息 tf=false 顯示錯誤信息 msg-信息內容
{
msg=msg.replace("\n","<li>");
msg=msg.replace(/\n/gi,"<li>");
if(!tf)
{
document.all.UploadButton.disabled=true;
FileObj.outerHTML=FileObj.outerHTML;
document.getElementById("preview").innerHTML=msg;
HasChecked=false;
}
else
{
document.all.UploadButton.disabled=false;
if(IsImg)
document.getElementById("preview").innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>"
else
// document.getElementById("preview").innerHTML="非圖片文件";
document.getElementById("preview").innerHTML=msg;
HasChecked=true;
}
}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
FileObj=obj;
IsImg=false;
HasChecked=false;
document.getElementById("preview").innerHTML="預覽區";
if(obj.value=="")return false;
document.all.UploadButton.disabled=true;
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判斷文件類型是否允許上傳
{
ErrMsg="\n該文件類型不允許上傳。請上傳 "+AllowExt+" 類型的文件，當前文件類型為"+FileExt;
ShowMsg(ErrMsg,false);
return false;
}
if(AllImgExt.indexOf(FileExt+"|")!=-1) //如果圖片文件，則進行圖片信息處理
{
IsImg=true;
ImgObj.src=obj.value;
CheckProperty(obj);
return false;
}
else
{
FileMsg="\n文件擴展名:"+FileExt;
ShowMsg(FileMsg,true);
}
}
</script>
<form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;">
<fieldset style="width: 372; height: 60;padding:2px;">
<input type="file" id="file1" onchange="CheckExt(this)" style="width:180px;">
<input type="submit" id="UploadButton" value="開始上傳" disabled><br>
<div id="preview" style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;" >
</div>
</fieldset>
Ⅱ nodejs可以上傳大文件嗎
可以。不過要修改。
處理方式為在nodeJs的app.js文件中寫一個use中間件將其大小限制給修改了。
修改代碼：（app.js中）
[javascript]view plain
app.use(express.bodyParser({limit:"5000kb"}));
app.use(express.json({limit:'5000kb'}));
這部分的代碼順序：（這個貌似沒多大作用，不過還是留一個）
Ⅲ 如何使用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;
}
Ⅳ SWFUpload 文件上傳插件常用的配置講解
上傳文件swfUpload 插件：
基本的文件上傳涉及到的四個文件 （還有一個處理數據的php文件 這里沒有涉及到）
html頁面：
upload_window.html
js文件：
swfupload.js
handlers.js
fileprogress.js
第一：從html頁晌敗面出發：
重要的是將頁面載入時間中的var setting={}這個大對象中的參數設置好 以下都是這個對象裡面的常用配置 非常重要
首先需要將swfupload.swf載入
在 var setting={} 這個大對象裡面加flash_url:值
如： flash_url: "<tpl>$siteurl_static</tpl>/assets/uc/js/swfupload.swf",
然後需要將上傳的路徑加入 如： upload_url: "http://load.zom.com/u.do?uploadkey=" + uploadkey + "&ck=" + ck + "&cc=" + cc,(java的上傳路徑)
相關的設置常用的有：
file_size_limit (設置上傳的大小) file_types（設置文件上傳的類型）file_types_description（設置文件上傳描述）
file_upload_limit （設置文件上傳的數量限制）file_queue_limit （設置文件隊列數量限制）
prevent_swf_caching : false （在相關的swf文件增加隨機參數避免Flash被緩存）
debug:false
按鈕的相關配置：
button_width: "200",
button_height: "50",
button_text_left_padding: 16,
button_text_top_padding: 7,
button_cursor: button_cursor 指定滑鼠懸停在Flash按鈕上時的游標樣式,可用值為SWFUpload.CURSOR里定義的常量。如：button_cursor: SWFUpload.CURSOR.HAND,
button_action（設置只能上傳一個文檔的限制：--》button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE）
之後就是設置一些事件處理函數 這些都是在 handlers.js 裡面相應的函數
file_dialog_start_handler: fileDialogStart,（設置文件對話開始函數）
file_queued_handler: fileQueued,（設置文件隊列函數）
file_dialog_complete_handler: fileDialogComplete,（設置文件對話完成處理函數）
file_queue_error_handler: fileQueueError,（設置隊列錯誤處理函數）
upload_start_handler: uploadStart,（設置開始上傳函數）
upload_progress_handler: uploadProgress,（設置上傳進度處理函數）
upload_error_handler: uploadError,（設置上傳錯誤處理函數）
upload_complete_handler: uploadComplete,（設置上傳此謹稿完成處理函數）
upload_success_handler: uploadSuccess（設置上傳成功處理函數）
以上的配置都是在頁面自動載入函數的setting大對象裡面需要配置的基本參數
除了以上這些還有下面相應的非常關鍵的配置
別忘記：在setting大對象結束之後 在自動載入函數結束之前還有swfu = new SWFUpload(settings); 實例化一個對象
var setting還有森孝比較重要的配置 如下：
1.關於上傳進度的配置是關鍵：
在var setting={}這個大對象裡面設置一個元素：
custom_settings: {
progressTarget: "fsUploadProgress"
},
progressTarget的值（即fsUploadProgress）是文件上傳進度的顯示 將html裡面設置相應的位置放id="fsUploadProgress"
如：<div class="progressbar progressbar-0" id="fsUploadProgress">
<span class="prog-num">0</span>
</div>
span標簽里的0就是從0開始進行上傳 0就是初始的顯示進度
2：關於上傳的按鈕設置
在 var setting={} 這個大對象裡面設置 button_placeholder_id : "spanButtonPlaceHolder"
需要將html相應的上傳按鈕加上相應的id="spanButtonPlaceHolder"
如：<div id="upload_doc" class="up-btn"><i >上傳文檔</i><span id="spanButtonPlaceHolder"></span></div>
成功上傳需要將相應的數據進行處理：
在html頁面中需要寫ajax進行數據的處理~
如：
//成功後調用
function agree_upload(){
var doc_id=$('.doc_title').attr('id');
if(doc_id>0){
uploadFinish(doc_id);
parent.DOC88Window.close();
}else{
alert('您還未選擇重新上傳的文檔');
}
}
function uploadFinish(new_p_id) {
var old_p_id = "<tpl>$p_id</tpl>";
$.ajax({
url: "/ucr/doc.php?act=save_upload",
type: "post",
data: {
old_p_id: old_p_id,
new_p_id: new_p_id
},
dataType: "json",
success: function (msg) {
if (msg.result == 1) {
alert("數據正確");
} else {
alert("數據錯誤");
}
}
});
}
第二：因為html頁面中setting配置中有相應的函數處理配置 涉及到handler.js函數，所以接下來到handler.js文件的處理配置
根據html頁面的配置 處理函數的順序進行相應的配置
首先是fileQueue函數 文件排隊函數：
需要設置一個變數 關於flash動畫的函數
var stats = swfu.getStats();
根據需要將文件上傳隊列數量進行限制
if (stats.files_queued > 1) {
alert("您的附件不能超過1個");
return false;
}
接下來是fileQueueError函數 文件排隊錯誤函數：
根據需要將相應的設置放在這個函數裡面
可以放在try catch函數裡面 設置的限制如下：
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
alert('單個文件大小不要超過50MB');
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
alert('不能上傳空文件');
this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
alert('文件類型錯誤');
break;
default:
if (file !== null) {
}
this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
接下來是uploadStart函數 文件上傳開始函數：
設置相應的功能按鈕的變換 比如上傳開始（走到這個函數時 可以將相應的上傳按鈕改成上傳中 並且禁止點擊 就是禁用功能 加上一個取消上傳按鈕 ）
可以將上傳的文件的名稱和文件格式顯示出來
如：
$("#upload_doc i").html("上傳中");
$('#cancel_upload').html('取消');
$("#upload_doc").attr('disabled','disabled');
var name = file.name;
$('.doc_title').html(name);
var format = file.type;
format = format.toLocaleUpperCase();
format = format.replace('.', '');
$('.doc_format').html(format);
接下來是uploadProgress函數 文件上傳進度函數：如：
var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);//上傳的進度
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setProgress(percent);
progress.setStatus("正在上傳");
接下來是uploadSuccess函數 文件上傳成功函數
然後是uploadError函數 上傳失敗函數：
其他相關的函數可以根據需要進行設置
第三：fileprogress.js文件 關於文件上傳進度 關鍵的是：
FileProgress函數的設置：
如：
function FileProgress(file, targetID) {
this.fileProgressID = file.id;
this.fileProgressWrapper = document.getElementById(this.fileProgressID);
if (!this.fileProgressWrapper) {
this.fileProgressWrapper = document.createElement("li");
this.fileProgressWrapper.id = this.fileProgressID;
document.getElementById(targetID).appendChild(this.fileProgressWrapper);
}
this.setTimer(null);
}
FileProgress.prototype.setProgress = function (percentage) {} 裡面進度樣式的處理
如：
if (percentage <= 5) {
$(".progressbar").addClass('progressbar-5');
} else if (percentage <= 10) {
$(".progressbar").addClass('progressbar-10');
}......
第四：swfupload.js文件 幾乎不用修改 可以將不用的函數刪減
有很詳細的講解 鏈接：https://www.cnblogs.com/myboke/p/5579236.html
http://www.runoob.com/w3cnote/swfupload-guide.html
Ⅳ 瀏覽器會限制js上傳文件大小嗎
瀏覽器是不會限制js上傳文件的大小的，但是js代碼可以控制
因為上傳操作是代碼處理的瀏覽器不會自動幫你上傳文件
Ⅵ 如何限制上傳文件的大小和類型
有兩種方式，
1、用fileupload控制項在後台判斷
FileUpload1.FileContent.Length判斷大小，
System.IO.Path.GetExtension(FileUpload1.FileName)獲取文件後綴
2、用jquery上傳控制項，可以直接判斷類型和大小
另外js也可以在前台判斷文件類型，但不能獲取文件大小，需要引用插件
Ⅶ 怎樣限制fileupload控制項上傳的文件大小 js
您好，我來為您解答：
這就是一個判斷而已，放在你要調用的JS方法裡面，執行的代碼在下面的控制項裡面執行的。
if(document.all.imgx.fileSize>1024*1024)
{
alert('圖片文件超過指定大小(1M)，請重新上傳附件');
window.event.returnValue=false;
return false;
}
就是在選擇附件之後將這個文件傳給img 在到JS方法裡面判斷
<asp:FileUpload ID="FileUpload2" runat="server" Width="353px" onchange="document.all.imgx.src=this.value"/><img src="" id="imgx" style="display:none">
轉載，僅供參考。
如果我的回答沒能幫助您，請繼續追問。