入力ファイルの変更イベントで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);
}
}
http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.htmlから
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>
ucefkhのソリューションは最適に機能しましたが、jQuery 1.91では$ .browserが廃止されたため、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;
}
HTML5ファイルAPIを使用して、次のことができます。http://www.html5rocks.com/en/tutorials/file/dndfiles/
ただし、古いブラウザでは常にPHP(または使用する他のバックエンド言語)のフォールバックが必要です。
個人的には、HTML標準を考えると、Web Worldの答えは今日のところ最高です。IE <10をサポートする必要がある場合は、何らかの形式のActiveXを使用する必要があります。Scripting.FileSystemObjectに対するコーディング、またはActiveXを直接インスタンス化することを含む推奨事項は避けます。
この場合、HTML5 APIまたはFlash / Silverlightコントロールを使用してそれらをサポートしないブラウザーをバックフィルするように構成できるpluploadなどのサードパーティJSライブラリを使用して成功しました。Pluploadには、IE <10で機能するファイルサイズをチェックするためのクライアント側APIがあります。