web-dev-qa-db-ja.com

ファイル入力要素の変更イベント時

値が変更されたときにアップロードプロセスをトリガーする4つのファイル入力があります。画像を選択して画像選択ダイアログで開くをクリックすると、画像をアップロードするスクリプトがトリガーされます。 onchangeイベントを使用しましたが、これは適切なイベントではないと思います。

JS：

$("input[type=file]").on('change',function(){
    alert(this.val());//I mean name of the file
});

HTML：

<div class="form-group col-md-11 col-md-offset-1">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
</div>

私は何をすべきか？

javascriptjqueryhtmlupload
22
Ramin

OnChangeイベントは良い選択です。ただし、ユーザーが同じ画像を選択した場合、現在の値は前の値と同じであるため、イベントはトリガーされません。

たとえば、画像は幅が変更されたものと同じであり、サーバーにアップロードする必要があります。

この問題を防ぐには、次のコードを使用できます。

$(document).ready(function(){
    $("input[type=file]").click(function(){
        $(this).val("");
    });

    $("input[type=file]").change(function(){
        alert($(this).val());
    });
});
24
Humberto Corrêa

val()の代わりに要素のfilesファイルリストを使用します

$("input[type=file]").on('change',function(){
    alert(this.files[0].name);
});
12
techfoobar

ファイル入力に一意のクラスと異なるIDを与える

           $("#tab-content").on('change',class,function()
               {
                  var id=$(this).attr('id');
                      $("#"+id).trigger(your function); 
               //for name of file input  $("#"+id).attr("name");
               });
2
AAA

ファイル入力で直接onchangeイベントを使用したい場合は、onchange="somefunction()を設定します。コード例は the link ：

<html>
<body>
    <script language="JavaScript">
    function inform(){
        document.form1.msg.value = "Filename has been changed";
    }
    </script>
    <form name="form1">
    Please choose a file.
    <input type="file" name="uploadbox" size="35" onChange='inform()'>
    <br><br>
    Message:
    <input type="text" name="msg" size="40">
    </form>
</body>
</html>
1
yu yang Jian