Codeigniter 3のAjax画像アップロードエラー

Question

こんにちは私はCodeigniter 3とjQuery ajaxを使用しています。あなたがアップロードするファイルを選択しなかった

：私は、アップロードライブラリに組み込まれて使用してい

...

は、私は自分のサーバーに画像をアップロードするが、常にこのエラーメッセージを取得したいです。ここで

は

見る私のコードです

<?php echo form_open_multipart('settings/uploadprofilephoto', array('id' => 'upload-avatar-form'));?> 
<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Upload profile photo</h4> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <div class="row"> 
        <div class="form-group col-md-6"> 
          <input type="file" name="profilephoto" id="profile-photo" class="form-control"> 
        </div> 
        <div class="form-group col-md-6"> 
         <button type="submit" id="upload" class="btn btn-success">Upload</button> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Modal --> 
<?php echo form_close();?> 

コントローラ

public function uploadProfilePhoto(){ 

     $config = array(
      'upload_path' => base_url() . 'uploads/test', 
      'allowed_types' => 'jpg|jpeg|gif|png', 
      'min_height' => 480, 
      'min_width' => 640, 
      'remove_spaces' => true, 
     ); 

     $this->load->library('upload', $config); 

     if($this->upload->do_upload("profilephoto")){ 

      $data = array(
       'status' => true, 
       'messages' => 'Uploaded' 
      ); 

      echo json_decode($data); 

     }else{ 

      $data = array(
       'status' => false, 
       'messages' => $this->upload->display_errors() 
      ); 

      echo json_encode($data); 
     } 

    } 

アヤックス

/* 
Upload profile photo 
*/ 
$("#upload-avatar-form").submit(function(event){ 
    $.post(base_url + "settings/uploadprofilephoto" , $(this).serialize(), function(data){ 
     console.log(data); 
     //alert("ok"); 
    }); 
    event.preventDefault(); 
}); 

どこが間違っていますか？

Answer 1

serialize()は、その中に画像を渡しません。マルチパートフォームデータでは機能しません。代わりに

次のように使用します。代わりに$(this).serialize()

Answer 2

のこのFORMDATA変数はビューの一部

<button type="button" id="button_name">Upload</button> 

Answer 3

あなたヘクタールで、この

$('#button_name').on('click', function(event) { 

    event.preventDefault(); 

    $.ajax({ 
     url: "<?php echo base_url('settings/uploadprofilephoto');?>", 
     type: 'post',  
     dataType: 'json', 
     data: new FormData(this), 
     cache: false, 
     contentType: false, 
     processData: false,  
     success: function(json) { 
      // Success Stuff 
     },   
    }); 
}); 

を試してみてください var formData = new FormData(this);

パス試してみてください

$('#logo_form').on('submit',function(form){ 
        form.preventDefault(); 
        var me = $(this); 

        var file_data = $('#file').prop('files')[0]; 
        var form_data = new FormData(); 
        form_data.append('file', file_data); 
        $.ajax({ 
         url: me.attr('action'), // point to server-side controller method 
         dataType: 'text', // what to expect back from the server 
         cache: false, 
         contentType: false, 
         processData: false, 
         data: form_data, 
         type: 'post', 
         success: function (response) { 
          $("#logo_form")[0].reset(); 
          $('#logo_success').html(response); // display success response from the server 
          window.setTimeout(function(){location.reload()},1000); 
         }, 
         error: function (response) { 
          $('#error').html(response); // display error response from the server 
         } 
        }); 
       }); 

Answer 4

これは入力データを含むファイルを送信するのに役立ちます。

var myFormData = new FormData(); 
 

 
$(document).on("click", "button", function(e) { 
 
    e.preventDefault(); 
 
    var inputs = $('#my_form input[type="file"]'); 
 
    $.each(inputs, function(obj, v) { 
 
    var file = v.files[0]; 
 
    var filename = $(v).attr("data-filename"); 
 
    var name = $(v).attr("id"); 
 
    myFormData.append(name, file, filename); 
 
    }); 
 
    var inputs = $('#my_form input[type="text"]'); 
 
    $.each(inputs, function(obj, v) { 
 
    var name = $(v).attr("id"); 
 
    var value = $(v).val(); 
 
    myFormData.append(name, value); 
 
    }); 
 
    var xhr = new XMLHttpRequest; 
 
    xhr.open('POST', '/echo/html/', true); 
 
    xhr.send(myFormData); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="my_form" enctype="multipart/form-data"> 
 
    <input type="file" name="file_1" id="file_1" data-filename="image.jpg"><br /> 
 
    <input type="text" name="check1" id="check1"/><br /> 
 
    <input type="text" name="check2" id="check2"/><br /> 
 
    <input type="text" name="check3" id="check3"/><br /> 
 
    <button>Submit</button> 
 
</form>

それが動作しない場合は、私に教えてください。