php＆ajaxでデータベースに画像をアップロード中

Question

modal〜& ajaxの形式でhtmlページからimageをデータベースにアップロードしようとしていますが、それはうまくいかず、なぜ誰も助けることができません私？

HTMLページ

<form method="post" enctype="multipart/form-data"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <label class="Modallabel">Photo:</label> 
     </div> 
     <div class="col-sm-8"> 
     <div class="input-group input-group-sm" style="margin-top: -5px;"> 
      <input type="file" id="fileUpload" name="fileUpload" style="color: #ffffff;"/> 
     </div><br> 
     </div> 
    </div> 
</form> 
<button type="button" class="btn btn-success btn-md" style="margin:0;width: 75px;" onclick="AddNewCustomer()">Add</button> 

JavaScript関数

function AddNewCustomer() 
{ 
//Image upload 
$(document).ready(function() 
{ 
    $(document).on('change', '#fileUpload', function() //NOT WORKING HERE 
    { 
     var property = document.getElementById("fileUpload").files[0]; 
     var image_name = property.name; 
     var image_extension = image_name.split('.').pop().toLowerCase(); 
     if (jQuery.inArray(image_extension, ['gif','png','jpg','jpeg']) == -1) 
     { 
      alert("invalid Image File"); 
     } 
     var image_size = property.size; 
     if(image_size > 2000000) 
     { 
      alert("Image File Size is very big"); 
     } 
     else 
     { 
      var form_data = new FormData(); 
      form_data.append("fileUpload", property); 

      $.ajax 
      ({ 
       type:"POST", 
       url:"addNewCustomer.php", 
       processData: false, 
       cache: false, 
       contentType: false, 
       data: 
        { 
        'form_data':form_data 
        }, 
       success: function(data){ 
        if (data == "Success!") 
        { 
         sweetAlert("Data entered successfully!"); 
        } 
        else if(data == "Exist") 
        { 
         sweetAlert("","Customer already exists!","error"); 
         return false; 
        } 
       }, 
       error: function(jqXHR, textStatus, errorThrown) { 
        console.log('ERROR', textStatus, errorThrown); 
       } 
      }) 
     } 
    }) 
}) 

} 

Answer 1

changeイベントはonclick="AddNewCustomer()で<button>でクリックした後に取り付けられます。

AddNewCustomer機能を削除し、#fileUpload要素のchangeを.btn要素でクリックして呼び出すことができます。

$(document).ready(function() { 
    $(document).on('change', '#fileUpload', function() {//do stuff}) 

    $(".btn").on("click", function() { 
    $("#fileUpload").trigger("change"); 
    }); 
}); 

Answer 2

画像は選択した直後にアップロードしますが、[追加]ボタンをクリックしたときにのみ機能を実行します。

changeコードを関数から取り除くか、ページが読み込まれたときに関数を呼び出して、フォームにリスナーを追加する必要があります。