มีวิธีใดในการค้นหาขนาดไฟล์ก่อนที่จะอัปโหลดไฟล์โดยใช้ AJAX / PHP ในการเปลี่ยนแปลงของไฟล์อินพุต
มีวิธีใดในการค้นหาขนาดไฟล์ก่อนที่จะอัปโหลดไฟล์โดยใช้ AJAX / PHP ในการเปลี่ยนแปลงของไฟล์อินพุต
คำตอบ:
สำหรับการร้อง HTML
<input type="file" id="myFile" />
ลองทำดังต่อไปนี้:
//binds to onchange event of your input field
$('#myFile').bind('change', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
ดูหัวข้อต่อไปนี้:
FileList.files
เป็นเหมือนอาร์เรย์ของFile
วัตถุซึ่งเป็นส่วนขยายของGlob
. และเป็นไปตามสเปค , Glob
แน่นอนกำหนดsize
สถานที่ให้บริการเป็นจำนวนไบต์ (0 สำหรับไฟล์ที่ว่างเปล่า) ดังนั้นใช่ผลที่ได้คือไบต์
<script type="text/javascript">
function AlertFilesize(){
if(window.ActiveXObject){
var fso = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.getElementById('fileInput').value;
var thefile = fso.getFile(filepath);
var sizeinbytes = thefile.size;
}else{
var sizeinbytes = document.getElementById('fileInput').files[0].size;
}
var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}
alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>
<input id="fileInput" type="file" onchange="AlertFilesize();" />
ทำงานบน IE และ FF
นี่คือตัวอย่างง่ายๆในการรับขนาดของไฟล์ก่อนอัปโหลด ใช้ jQuery เพื่อตรวจจับเมื่อใดก็ตามที่มีการเพิ่มหรือเปลี่ยนแปลงเนื้อหา แต่คุณยังสามารถรับได้files[0].size
โดยไม่ต้องใช้ jQuery
$(document).ready(function() {
$('#openFile').on('change', function(evt) {
console.log(this.files[0].size);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
<input id="openFile" name="img" type="file" />
</form>
นี่คือตัวอย่างที่สมบูรณ์ยิ่งขึ้นซึ่งเป็นหลักฐานเกี่ยวกับรหัสแนวคิดในการลากและวางไฟล์ลงใน FormDataและอัปโหลดผ่าน POST ไปยังเซิร์ฟเวอร์ รวมถึงการตรวจสอบขนาดไฟล์อย่างง่าย
ฉันมีปัญหาเดียวกันและดูเหมือนว่าเราไม่มีวิธีแก้ปัญหาที่ถูกต้อง หวังว่านี่จะช่วยคนอื่นได้
หลังจากใช้เวลาสำรวจรอบ ๆ ในที่สุดฉันก็พบคำตอบ นี่คือรหัสของฉันเพื่อรับไฟล์แนบด้วย jQuery:
var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);
นี่เป็นเพียงตัวอย่างโค้ดสำหรับการรับขนาดไฟล์ หากคุณต้องการทำอย่างอื่นอย่าลังเลที่จะเปลี่ยนรหัสเพื่อตอบสนองความต้องการของคุณ
ทางออกที่ดีที่สุดสำหรับทุกเบราว์เซอร์;)
function GetFileSize(fileid) {
try {
var fileSize = 0;
// for IE
if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
// before making an object of ActiveXObject,
// please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in b
fileSize = fileSize / 1048576; //size in mb
}
// for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in b
fileSize = fileSize / 1048576; //size in mb
}
alert("Uploaded File Size is" + fileSize + "MB");
}
catch (e) {
alert("Error is :" + e);
}
}
UPDATE: เราจะใช้ฟังก์ชั่นนี้เพื่อตรวจสอบว่าเป็นเบราว์เซอร์ IE หรือไม่
function checkIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
// If Internet Explorer, return version number
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
} else {
// If another browser, return 0
alert('otherbrowser');
}
return false;
}
$(document).ready(function() {
$('#openFile').on('change', function(evt) {
console.log(this.files[0].size);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
<input id="openFile" name="img" type="file" />
</form>
เบราว์เซอร์ที่รองรับ HTML5 มีคุณสมบัติของไฟล์สำหรับประเภทอินพุต แน่นอนว่าสิ่งนี้จะใช้ไม่ได้กับ IE เวอร์ชันเก่า
var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
var size = inpFiles.files.item(i).size;
alert("File Size : " + size);
}
โซลูชันของ ucefkh ทำงานได้ดีที่สุด แต่เนื่องจาก $ .browser เลิกใช้ใน jQuery 1.91 จึงต้องเปลี่ยนไปใช้ navigator.userAgent:
function IsFileSizeOk(fileid) {
try {
var fileSize = 0;
//for IE
if (navigator.userAgent.match(/msie/i)) {
//before making an object of ActiveXObject,
//please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in b
fileSize = fileSize / 1048576; //size in mb
}
//for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in b
fileSize = fileSize / 1048576; //size in mb
}
return (fileSize < 2.0);
}
catch (e) {
alert("Error is :" + e);
}
}
คุณต้องทำคำขอ ajax HEAD เพื่อรับขนาดไฟล์ ด้วย jquery มันเป็นแบบนี้
var req = $.ajax({
type: "HEAD",
url: yoururl,
success: function () {
alert("Size is " + request.getResponseHeader("Content-Length"));
}
});
โปรดอย่าใช้ActiveX
เนื่องจากมีโอกาสที่จะแสดงข้อความเตือนที่น่ากลัวใน Internet Explorer และทำให้ผู้ใช้ของคุณตกใจ
หากใครต้องการใช้การตรวจสอบนี้พวกเขาควรพึ่งพาอ็อบเจ็กต์FileList ที่มีอยู่ในเบราว์เซอร์รุ่นใหม่เท่านั้นและอาศัยการตรวจสอบฝั่งเซิร์ฟเวอร์สำหรับเบราว์เซอร์รุ่นเก่าเท่านั้น ( การปรับปรุงแบบก้าวหน้า )
function getFileSize(fileInputElement){
if (!fileInputElement.value ||
typeof fileInputElement.files === 'undefined' ||
typeof fileInputElement.files[0] === 'undefined' ||
typeof fileInputElement.files[0].size !== 'number'
) {
// File size is undefined.
return undefined;
}
return fileInputElement.files[0].size;
}
คุณสามารถใช้ฟังก์ชัน PHP filesize ในระหว่างการอัปโหลดโดยใช้ ajax โปรดตรวจสอบขนาดไฟล์ก่อนโดยส่งคำขอ ajax ไปยังสคริปต์ php ที่ตรวจสอบขนาดไฟล์และส่งคืนค่า
คุณสามารถใช้ HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/
อย่างไรก็ตามคุณควรมีทางเลือกสำหรับ PHP (หรือภาษาแบ็กเอนด์อื่น ๆ ที่คุณใช้) สำหรับเบราว์เซอร์รุ่นเก่า
โดยส่วนตัวแล้วฉันจะบอกว่าคำตอบของ Web Worldดีที่สุดในปัจจุบันเนื่องจากมาตรฐาน HTML หากคุณต้องการรองรับ IE <10 คุณจะต้องใช้ ActiveX บางรูปแบบ ฉันจะหลีกเลี่ยงคำแนะนำที่เกี่ยวข้องกับการเข้ารหัสกับ Scripting FileSystemObject หรืออินสแตนซ์ ActiveX โดยตรง
ในกรณีนี้ฉันประสบความสำเร็จในการใช้ไลบรารี JS ของบุคคลที่สามเช่นpluploadซึ่งสามารถกำหนดค่าให้ใช้การควบคุม HTML5 apis หรือ Flash / Silverlight เพื่อทดแทนเบราว์เซอร์ที่ไม่รองรับ Plupload มี API ฝั่งไคลเอ็นต์สำหรับตรวจสอบขนาดไฟล์ที่ทำงานใน IE <10