ファイルが選択されたときにアップロードフォームを自動送信するにはどうすればよいですか？

154

簡単なファイルアップロードフォームがあります。ファイルが選択されたときに自動的に送信するにはどうすればよいですか？ユーザーが[送信]ボタンをクリックする必要がないようにします。

javascript html

— ram1
ソース

9

ユーザーが間違ったファイルを選択した場合はどうなりますか？IMO、いつ提出するかはユーザーに任せてください。

— タイラークロンプトン、2011

2

@タイラーほとんどの人が正しいファイルを選択し、私はUXの摩擦を減らすことを試みています。間違ったファイルを選択した人は、アップロード後に削除することを選択できます。

— ram1

3

「ほとんどの人」は賢い決断を下しますが、ほとんどの人はそうではありません。

— Phix 2013

2

私は@TylerCromptonに同意します。ユーザーは愚かな間違いを犯し、あなたを責めます。送信後に取り消しを追加できます。

— ロスケディ2016年

3

最良の答えは、最も単純な答えです。stackoverflow.com/a/25893747/1536309

— ブレアアンダーソン

194

ファイルが入力さsubmitれたonchange場合は、フォームのメソッドを呼び出すだけです。

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

http://jsfiddle.net/cwvc4/73/

— アレックスターピン
ソース

4

これはjQueryソリューションが機能していないように見えるSafariで機能します。おかしい？

— ヘンリーライト、2014

2

@henrywright：はい。jQueryでは、Submit()呼び出しはjQuery submitイベントをトリガーしますが、基になるフォームを起動しませんsubmit()。もちろん$('form')[0].submit()、jQueryを使用してDOM要素をヒットするために使用することもできます

— Gone Coding

68

file変更があったときにフォームを自動的に送信するように-inputに指示するだけです。

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>

スニペットを展開

このソリューションは次のように機能します。

onchangevalueが変更されるたびに、入力要素に次のスクリプトを実行させます
form この入力要素が含まれているフォームを参照します
submit() で指定されているように、フォームがすべてのデータをURLに送信するようにします action

このソリューションの利点：

なしで動作しidます。1つのhtmlページに複数のフォームがある場合は、作業が楽になります。
ネイティブ javascript、jQueryまたは同様のものは必要ありません。
コードはhtmlタグ内にあります。HTMLを調べると、その動作がすぐにわかります。

— スラルチダン
ソース

48

jQueryの使用：

$('#file').change(function() {
  $('#target').submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="file" id="file" value="Go" />
</form>

スニペットを展開

— サミチ
ソース

また、同じ質問はstackoverflowの上にあった：stackoverflow.com/questions/4704154/...

— Samich

このアプローチはSafariで機能しますか？よく分かりません。私はすべて動作するChrome、IE、FFをテストしました。

— henrywright

@ErdalG：機能するjQueryのバージョンが以下に追加されました。この問題を回避します。

— コーディングを

31

onchangeイベント付きJavaScript ：

<form action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>

スニペットを展開

jQuery .change()と.submit()：

$('#fileInput').change(function() {
  $('#myForm').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
     <input type="file" id="fileInput">
</form>

スニペットを展開

— Alex.K.
ソース

反対票を投じる場合はコメントを追加して、何が悪いのか、何を改善すべきかを明確にしてください。

— Alex.K

9

最短の解決策は

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

— xboz
ソース

2

いかがですかonchange="this.form.submit()"

— ヴィッキー

1

いかがonchange="form.submit()"ですか？:)

— slartidan 2017年

5

<form id="thisForm" enctype='multipart/form-data'>    
  <input type="file" name="file" id="file">
</form>

<script>
$(document).on('ready', function(){
  $('#file').on('change', function(){
    $('#thisForm').submit();
  });
});
</script>

— ドゥルババラル
ソース

4

jQuery simpleをすでに使用している場合：

<input type="file" onChange="$(this).closest('form').submit()"/>

— ソイティン
ソース

4

これは、ユーザーがファイルを選択したときの画像アップロードソリューションです。

HTML部分：

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

JavaScript：

document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
    var upload = document.getElementById('img_input');
    var image = upload.files[0];
    $.ajax({
      url:"/foo/bar/uploadPic",
      type: "POST",
      data: new FormData($('#img_form')[0]),
      contentType:false,
      cache: false,
      processData:false,
      success:function (msg) {}
      });
};

— シギ
ソース

2

jqueryで次のコードを試してください：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
$(document).ready(function(){
    $('#myForm').on('change', "input#MyFile", function (e) {
        e.preventDefault();
        $("#myForm").submit();
    });
});
</script>
<body>
    <div id="content">
        <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
            <input type="file" id="MyFile" value="Upload" />
        </form>
    </div>
</body>
</html>

— ラジブアルマムン
ソース

これは、jqueryを使用して送信イベントをキャッチできる唯一の方法であるためです。他のメソッドは送信イベントをバイパスしているようです。そのため、フォームのチェックを実行したり、Ajaxを使用して送信したりできません。ありがとう

— user1404617

1

.NET WebFormsを使用している場合は、ページ全体の送信が望ましくない場合があります。代わりに、同じonchangeアイデアを使用して、JavaScriptが非表示のボタン（たとえば、<asp：Button ...）をクリックするようにし、非表示のボタンが残りの部分を引き継ぐことができます。display: none;ボタンではなくを実行していることを確認してくださいVisible="false"。

— ペロイジャ
ソース

1

HTML

<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>

ジャバスクリプトピュア

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>

— キングライダー
ソース

1

<form action="http://example.com">
    <input type="file" onchange="Submit()" />
</form>

 <script>
     // it will submit form 0 or you have to select particular form
     document.getElementsByTagName("form")[0].submit();       
 </script>

— アナン・ダビ
ソース

0

このコードを配置して、1行のコードでコードを機能させることができます

<input type="file" onchange="javascript:this.form.submit()">

これにより、送信ボタンをクリックせずにサーバーにファイルがアップロードされます

— アミット・クマール
ソース