在客戶端使用jquery將圖片上傳大小限制爲20kb

我使用php進行提交後處理，但這裏我想在提交表單前將圖片上傳大小限制爲20kb。在這裏，我試圖在不同的領域逐個上傳3張圖片。需要這個在客戶端使用jquery將圖片上傳大小限制爲20kb

幫忙，謝謝

user.php的

<input type="file" text-align="right" class="filestyle" name="p1" id="p1" data-size="sm" data-input="false" required/> 
<input type="file" text-align="right" class="filestyle" name="p2" id="p2" data-size="sm" data-input="false" required/> 
<input type="file" text-align="right" class="filestyle" name="p3" id="p3" data-size="sm" data-input="false" required/>

腳本我在這裏查看該文件的大小

$('#p1').bind('change', function() { 
     alert('This file size is: ' + this.files[0].size/1024/1024 + "MB"); 
    });

如何限制大小點擊提交按鈕之前的圖片

來源

2017-04-23 sparkrish77

您的問題回答了下面的鏈接：http://stackoverflow.com/questions/1601455/how-to-check-file-input-size-with-jquery#answer-3937404 –

文件大小可以從change事件處理程序中進行比較，並且如果它超過輸入被清除。它也可以在submit上完成。

$('input#file').bind('change', function() { 
 
    var maxSizeKB = 20; //Size in KB 
 
    var maxSize = maxSizeKB * 1024; //File size is returned in Bytes 
 
    if (this.files[0].size > maxSize) { 
 
    $(this).val(""); 
 
    alert("Max size exceeded"); 
 
    return false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="file" id="file">

來源

2017-04-23 06:45:47

可以使用<form>元件作爲父每個<input type="file">元件，包括具有disabled屬性相鄰設置給每個<input type="file">元件的<input type="submit">元件。如果.files[0].size小於20000，則設置disabled的<input type="submit">元素爲false，否則將disabled屬性設置爲true。

const SIZE = 20 * 1024; 
 

 
$(".filestyle").on("change", function(e) { 
 
    console.log(this.files[0].size); 
 
    let VALID = false; 
 
    if (this.files[0].size > SIZE) { 
 
    this.value = ""; 
 
    console.log("file size greater than " + SIZE); 
 
    } else { 
 
    console.log("file size less than " + SIZE); 
 
    VALID = true; 
 
    } 
 
    $("+ input[type=submit]", this).prop("disabled", !VALID) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input type="file" text-align="right" class="filestyle" name="p1" id="p1" data-size="sm" data-input="false" required/><input type="submit" disabled/> 
 
</form> 
 
<form> 
 
<input type="file" text-align="right" class="filestyle" name="p2" id="p2" data-size="sm" data-input="false" required/><input type="submit" disabled/> 
 
</form> 
 
<form> 
 
<input type="file" text-align="right" class="filestyle" name="p3" id="p3" data-size="sm" data-input="false" required/><input type="submit" disabled/> 
 
</form>

來源

2017-04-23 06:56:29 guest271314

在客戶端使用jquery將圖片上傳大小限制爲20kb

回答

相關問題