イメージをアップロードしようとしていますが、その前にタイプとサイズに基づいて無効なファイルが表示されています。サイズが5MBのファイルを1つアップロードするとうまくいきます。しかし、私はこの5メガバイトの画像を含む複数のファイルを選択すると、私のテストは失敗し、そのサイズが2以上であることは検出されません。あなたが結合機能にfile.size
を追加する必要がJSファイルサイズのテストは複数のファイルアップロードで失敗しますが、1つのファイルアップロードでは失敗します
<input type="file" name="file[]" id="image-upload" class="file-input" accept="image/*" multiple>
<div id="img-wrapper"></div>
<hr>
<div id="invalid-images"></div>
<style type="text/css">
.invalid-img-thumbnail{
width: 100px;
height:100px;
border: 2px solid red;
}
.thumbnail{
width: 100px;
height:100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var valid_extensions = ["jpg", "jpeg", "png", "gif"];
$("#image-upload").change(function() {
var files = $(this)[0].files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = (function(name, event) {
var img = event.target.result; //image preview
var extension = name.split('.')[name.split('.').length - 1].toLowerCase(); //get file extension
if(valid_extensions.indexOf(extension)===-1 || file.size > (2000 * 1024)){ //if extension is valid image extension type and size is less that 2mb
$('#invalid-images').append(
"<img class='invalid-img-thumbnail' src='" + img + "'" + "title='" + name + "'/>");
}else{
$('#img-wrapper').append(
"<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>");
console.log('\n'+file.size);
}
}).bind(reader, file.name);
reader.readAsDataURL(file);
}
});
</script>
FYI、 '$(この)[0] .files'はちょうど' this.files'することができます。オリジナルのDOMオブジェクトを抽出するだけの場合は、jQueryオブジェクトに変換する必要はありません。 – Barmar