ファイルサイズ合計と更新カウンタ

アップロードしたファイルの合計サイズを計算してから、それを10から減らす必要があります（合計利用可能な制限は10MBのみです）。ファイルをアップロード/追加するたびに残りの領域からそれを減らす必要があります。初期値は10 MBです。 3MBのファイルを1つ、残りの7MBをアップロードしました。今度は4MBの別のファイルですので、残りは3MBです。ファイルサイズ合計と更新カウンタ

質問：アップロード中にファイルアップロードボタンを無効にすることはできますか？ファイルがアップロードされている場合でも、無効にして、すべてのファイルのアップロードが完了したときにのみファイルを追加できます。

$(document).ready(function(){ 
 
$("#addFile").click(function() { 
 
    $("#my_file").click(); 
 
}); 
 

 
$("#my_file").change(function(e) { 
 
    var files = e.target.files; 
 

 
    for (var i = 0, f; f = files[i]; i++) { 
 
     ParseFile(f); 
 
    } 
 
    function ParseFile(file) { 
 
     var filename = file.name.replace(/\..+$/, ''); 
 
     var filesize = file.size/1024; 
 
     filesize = (Math.round((filesize/1024) * 100)/100); 
 
     var filetype = file.type.split('/').pop().toUpperCase(); 
 
     if (filetype == 'PDF' || filetype == 'JPEG' || filetype == 'JPG' || filetype == 'PNG') { 
 
      $("#filedetails").append("<tr><td><strong>" + filename + "</strong></td><td>" + filesize + " MB</td><td>" + filetype + "</td><td><a href='#'>Delete</td></tr>"); 
 
     } 
 
     else { 
 
      alert('Only JPG, PDF n PNG files are allowed to upload.'); 
 
     } 
 
    } 
 
}); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 
    <title>File Upload</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
    <script src="fileupload.js"></script> 
 
</head> 
 
<body> 
 
    <input type="button" value="Add File(s)" id="addFile"> 
 
    <input type="file" id="my_file" style="display:none;" multiple="multiple" accept="image/png, image/jpg, image/jpeg, application/pdf"> 
 
    <table cellspacing="0" cellpadding="0" width="100%" border="1"> 
 
    <thead> 
 
    <tr> 
 
    <th>Name</th> 
 
    <th>Size</th> 
 
    <th>Type</th> 
 
    <th></th> 
 
    </thead> 
 
    <tbody id="filedetails"></tbody> 
 
</table> 
 
<div id="totalsize">Total Uploaded File Size(s): </div> 
 
</body> 
 
</html>

出典

2016-08-11 Kunal Vijan

あなたは、foreachループに構文解析ファイルの関数からファイルサイズを返し、すべて一緒に合計する必要があります。ただし、複数のファイルを送信する場合は、一度にすべてを選択する必要があります。

もちろん、選択したファイルが10MBを超えているかどうかを確認するための検証が必要です。

$(document).ready(function(){ 
 
var maxSize = 10, // MB 
 
    currentSize = 0, 
 
    remainSize = 0; 
 

 
$("#addFile").click(function() { 
 
    $("#my_file").click(); 
 
}); 
 

 
$("#my_file").change(function(e) { 
 
    var files = e.target.files; 
 

 
    for (var i = 0, f; f = files[i]; i++) { 
 
    if (ParseFile(f) === false) { 
 
     alert('not enought space - there\'s only ' + remainSize.toFixed(2) + ' MB left'); 
 
     break; 
 
    } 
 
    } 
 

 
    $('#totalsize span').text(currentSize.toFixed(2)); 
 
    $('#remainsize span').text(remainSize.toFixed(2)); 
 

 
    function ParseFile(file) { 
 
    var filename = file.name.replace(/\..+$/, ''); 
 
    var filesize = file.size/1024; 
 
    filesize = (Math.round((filesize/1024) * 100)/100); 
 
    var filetype = file.type.split('/').pop().toUpperCase(); 
 
    if (filetype == 'PDF' || filetype == 'JPEG' || filetype == 'JPG' || filetype == 'PNG') { 
 
     if (currentSize + filesize >= maxSize) { 
 
     return false; 
 
     } 
 
     currentSize += filesize; 
 
     remainSize = maxSize - currentSize; 
 

 
     $("#filedetails").append("<tr><td><strong>" + filename + "</strong></td><td>" + filesize + " MB</td><td>" + filetype + "</td><td><a href='#'>Delete</td></tr>"); 
 
    } 
 
    else { 
 
     alert('Only JPG, PDF n PNG files are allowed to upload.'); 
 
    } 
 
    } 
 
}); 
 
    });

<!doctype html> 
 
<html> 
 
<head> 
 
\t <title>File Upload</title> 
 
\t <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
\t <script src="fileupload.js"></script> 
 
</head> 
 
<body> 
 
\t <input type="button" value="Add File(s)" id="addFile"> 
 
\t <input type="file" id="my_file" style="display:none;" multiple="multiple" accept="image/png, image/jpg, image/jpeg, application/pdf"> 
 
\t <table cellspacing="0" cellpadding="0" width="100%" border="1"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Name</th> 
 
\t \t \t \t <th>Size</th> 
 
\t \t \t \t <th>Type</th> 
 
\t \t \t \t <th></th> 
 
\t \t </thead> 
 
\t \t <tbody id="filedetails"></tbody> 
 
\t </table> 
 
\t <div id="totalsize">Total Uploaded File Size(s): <span>0</span> MB</div> 
 
\t <div id="remainsize">Remain: <span>0</span> MB</div> 
 
</body> 
 
</html>

EDIT：以下実施 '削除' 機能を備えた上記のコードの拡張バージョンです。 リファクタリングをお勧めします。

$(document).ready(function(){ 
 

 
var maxSize = 10, // MB 
 
\t \t currentSize = 0, 
 
\t \t remainSize = 0; 
 

 
function refreshSpace() { 
 
\t $('#totalsize span').text(currentSize.toFixed(2)); 
 
\t $('#remainsize span').text(remainSize.toFixed(2)); 
 
} 
 

 
$("#addFile").click(function() { 
 
\t $("#my_file").click(); 
 
}); 
 

 
$("#my_file").change(function(e) { 
 
\t var files = e.target.files; 
 

 
\t for (var i = 0, f; f = files[i]; i++) { 
 
\t \t if (ParseFile(f) === false) { 
 
\t \t \t alert('not enought space - there\'s only ' + remainSize.toFixed(2) + ' MB left'); 
 
\t \t \t break; 
 
\t \t } 
 
\t } 
 

 
\t refreshSpace(); 
 

 
\t function ParseFile(file) { 
 
\t \t var filename = file.name.replace(/\..+$/, ''); 
 
\t \t var filesize = file.size/1024; 
 
\t \t filesize = (Math.round((filesize/1024) * 100)/100); 
 
\t \t var filetype = file.type.split('/').pop().toUpperCase(); 
 
\t \t if (filetype == 'PDF' || filetype == 'JPEG' || filetype == 'JPG' || filetype == 'PNG') { 
 
\t \t \t if (currentSize + filesize >= maxSize) { 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t currentSize += filesize; 
 
\t \t \t remainSize = maxSize - currentSize; 
 

 
\t \t \t $("#filedetails").append("<tr data-filesize='" + filesize + "'><td><strong>" + filename + "</strong></td><td>" + filesize + " MB</td><td>" + filetype + "</td><td><a class='delete' href='#'>Delete</td></tr>"); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t alert('Only JPG, PDF n PNG files are allowed to upload.'); 
 
\t \t } 
 
\t } 
 
}); 
 

 
$("#filedetails").on('click', '.delete', function(e) { 
 
\t var $parent = $(this).closest('tr'),filesize = $parent.attr('data-filesize'); 
 
\t currentSize -= filesize; 
 
\t remainSize = maxSize - currentSize; 
 
\t refreshSpace(); 
 
\t $parent.remove(); 
 
}); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 
\t <title>File Upload</title> 
 
\t <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
\t <script src="fileupload.js"></script> 
 
</head> 
 
<body> 
 
\t <input type="button" value="Add File(s)" id="addFile"> 
 
\t <input type="file" id="my_file" style="display:none;" multiple="multiple" accept="image/png, image/jpg, image/jpeg, application/pdf"> 
 
\t <table cellspacing="0" cellpadding="0" width="100%" border="1"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Name</th> 
 
\t \t \t \t <th>Size</th> 
 
\t \t \t \t <th>Type</th> 
 
\t \t \t \t <th></th> 
 
\t \t </thead> 
 
\t \t <tbody id="filedetails"></tbody> 
 
\t </table> 
 
\t <div id="totalsize">Total Uploaded File Size(s): <span>0.00</span> MB</div> 
 
\t <div id="remainsize">Remain: <span>10.00</span> MB</div> 
 
</body> 
 
</html>

出典

2016-08-11 21:07:59 jacqbus

が、私はその既存のファイルを削除し、次回以降のファイルを選択していた場合 –

私はすでに –

を追加され、それらのファイルを削除したくないしかし、あなたは別のファイルを選択した場合、以前の意志入力から削除され、送信されません。そのサイズを表示するだけの場合は、選択したすべてのファイルを記憶するアレイを追加する必要があり、すべての変更がリフレッシュされます。 – jacqbus

ファイルサイズ合計と更新カウンタ

答えて

関連する問題