画像ファイル以外の物が送られた時アラートを出したい

Question

画像ファイル以外の物が送られた時アラートを出したいです。

@login_required
def photo(request):
    d = {
        'photos': Post.objects.all(),
    }
    return render(request, 'registration/accounts/profile.html', d)

@login_required
@csrf_exempt
def upload_save(request):
    form = UserImageForm(request.POST, request.FILES)
    if request.method == "POST" and form.is_valid():
            data = form.save(commit=False)
            data.user = request.user
            data.save()
            return render(request, 'registration/photo.html')

    else:
        form = UserImageForm()
        return render(request, 'registration/profile.html', {'form': form})

とviews.pyに書いて

<form action="/accounts/upload_save/" method="POST" enctype="multipart/form-data" role="form">
            {% csrf_token %}

          　　<div class="input-group">
                <label class="input-group-btn" style="width: 80px;">
                  <span class="file_select btn-lg">
                    ファイルを選択する
                    <input id="file1" type="file" name="image" style="display: none">
                  </span>
                </label>
          　　　 <input type="text" class="form-control" readonly="">
          　　</div>

            <div class="form-group">
              <input type="hidden" value="{{ p_id }}" name="p_id" class="form-control">
            </div>
            <div class="col-xs-offset-2">
              <div class="form-group">
              <input id="send" type="submit" value="送信" class="form-control" style="width:30%;height:50px;font-size:25px;">
              </div>
            </div>
          </form>
        </div>

        </div>

        </div>

    <script type="text/javascript" language="JavaScript">
    window.onload = function () {
        var a = document.getElementById("send");
        var file1 = document.getElementById("file1");
        var file2 = document.getElementById("file2");
        var file3 = document.getElementById("file3");
        a.onclick = function(){
            if(file1.value=="" && file2.value=="" && file3.value=="" ){
                alert ('画像を最低１枚は選択してください');
                return false;
            }
            else {
                return true;
            }
        }
    }
    </script>

とprofile.htmlに書きました。

<script type="text/javascript" language="JavaScript">
    window.onload = function () {
        var a = document.getElementById("send");
        var file1 = document.getElementById("file1");
        var file2 = document.getElementById("file2");
        var file3 = document.getElementById("file3");
        a.onclick = function(){
            if(file1.value=="" && file2.value=="" && file3.value=="" ){
                alert ('画像を最低１枚は選択してください');
                return false;
            }
            else {
                return true;
            }
        }
    }
    </script>

のようにtif・tiff・jpg・jpeg・png・gif　の画像フォーマット以外の物が送られた時、「画像を送ってください」とアラートを出したいのですがどう書けば良いのでしょうか？

Comments

[Lhankor_Mhy]

javascriptでやりたい、ということでしょうか？

[退会済みユーザー]

はい、そうです

[Lhankor_Mhy]

問題解決後にコードを消すのはよくないと思うのですが。

[Unkonow]

仕様上の問題なので報告してください。

Answer 1

サンプル

var test = document.getElementById('test');
var check = document.getElementById('check');
check.addEventListener('click',function(e){
  alert(test.files[0].type);
})

参考：FileList - Web API インターフェイス | MDN