이미지를 PHP 및 아약스로 데이터베이스에 업로드

modal에서 PHP로 & 아약스를 통해 양식의 html 페이지에서 image을 데이터베이스에 업로드하려하지만 작동하지 않습니다. 이유는 알 수 없습니다. 누구든지 도움을받을 수 있습니다. 나를?이미지를 PHP 및 아약스로 데이터베이스에 업로드

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>

자바 스크립트 기능

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); 
       } 
      }) 
     } 
    }) 
}) 

}

출처

2017-05-23 NewDeveloper

* 작동하지 않습니다 * 무슨 일이 일어나고 있는지 이해하기에 충분하지 않습니다. 둘째 : PHP 코드는 어디에 있습니까? –

은 괄호 사이에 다음 코드를 실행하기 위해 코드가 입력되지 않음을 의미합니다. – NewDeveloper

change 이벤트는 onclick="AddNewCustomer()에서 <button>에서 클릭 후 연결된다.

AddNewCustomer 함수를 제거하고 요소의 change을 .btn 요소에서 클릭하여 호출 할 수 있습니다.

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

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

출처

2017-05-23 21:07:08 guest271314

양식에 다른 입력 (이름, 성, 이메일, ... 사진)이 있습니다. 그 이유는 제가'AddNewCustomer' 함수를 가지고 있기 때문입니다 – NewDeveloper

@NewDeveloper'.btn' 요소에서'click' 이벤트의 목적은 무엇입니까? – guest271314

목적은 데이터베이스에 고객 데이터를 추가하는 것입니다 (Name, Phone, Emai, .... Photo) – NewDeveloper

이미지를 선택한 직후에 업로드하고 싶지만 '추가'버튼을 클릭하면 기능이 실행됩니다.

change 코드를 함수에서 제거하거나 페이지가로드 될 때 함수를 호출하여 양식에 리스너를 추가해야합니다.

출처

2017-05-23 21:07:23 helllomatt

이미지를 PHP 및 아약스로 데이터베이스에 업로드

답변

관련 문제