送信ボタンとブラウズボタンが1つのボタンに置​​き換えられたときにファイルをアップロードできません

Question

ブラウズボタンとサブミットボタンを組み合わせてみました。ボタンをクリックすると、ファイルを選択できました。

しかし、ファイルが

をアップロードされません。これは、フォーム

HTMLです：

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" method="post" id="myform" enctype="multipart/form-data"> 
    <input type="file" name="upload" id="upload" style="display:none"> 
    <button id="browse">Upload</button> 
</form> 

jQueryの

$(document).ready(function(){ 
     $("#upload").change(function(){ 
       $("#myform").submit(); 
     }); 
     $("#browse").click(function(){ 
     $("#upload").click(); 
     }); 

    }); 

それから私は、提出データ

PHP：

if($_SERVER["REQUEST_METHOD"]=="POST") 
{ 

    $file=$_FILES["upload"]["name"]; 
    $folder='uploads/'; 
    $err=$_FILES["upload"]["error"]; 
    $target=$folder.$file; 
    $temp=$_FILES["upload"]["tmp_name"]; 
    echo $err; 
    move_uploaded_file($temp, $target); 
} 

私は4として出力を得ました。これは、ファイルがアップロードされていないことを意味します。この問題をどのように解決できますか？

Answer 1

これを達成するための簡単なエレガントな方法があります。

• ないすべてのWebブラウザがデフォルトボタンの種類として「送信」を使用しているので、=ボタンに「送信」タイプを追加
• イベントが

を提起されたときに「送信」トリガーフォームのイベントリスナーを追加します。

例コード：

$(document).ready(function(){ 
 
    
 
    $('#myform').submit(function(e) { 
 
    
 
    // Remove following two lines in order to perform the submission 
 
    // I added the two lines in order to avoid the real submission (Test purposes) 
 
    e.preventDefault(); 
 
    alert('Submitted!') 
 
    
 
    }) 
 
    
 
    $("#upload").change(function(){ 
 
    $("#myform").submit(); 
 
    }); 
 

 
});

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

 
<form action="example.html" method="post" id="myform" enctype="multipart/form-data"> 
 
    <input type="file" name="upload" id="upload"> 
 
    <button id="browse">Upload</button> 
 
</form>

別のページにリダイレクトせずにコードスニペットを実行するために、含まれている "preventDefault"と "alert"行を削除することを忘れないでください。