아약스를 사용하여 이미지를 삽입하는 방법

Question

이미지 필드가있는 양식을 삽입하려고합니다. 텍스트 필드를 가져올 수 있지만 이미지를 가져 오려고합니다. console.log를 사용할 때 내 이미지는 정의되지 않습니다.

내 laravel 블레이드

<!-- This gets the admin template from app/modules/templates/views --> 
@extends('templates::layouts.admin') 
<!-- This inserts the content below into the template --> 
@section('content') 
{{ Html::script('js/admin/menu.js') }} 
{{ Form::open(array('route' => 'admin.menus.store', 'class' => 'add-form', 'files' => true)) }} 
    <div class="form"> 
     <div class="title_input"> 
      <div> 
       {{ Form::label('title', 'Title') }} 
      </div> 
      <div> 
       {{ Form::text('title','', array('id' => 'title', "class" => "form-control")) }} 
      </div> 
     </div> 

     <div class="dropzone" id="my-dropzone" name="mainFileUploader"> 
      <div class="fallback"> 
       <input class="test_image" name="file" type="file" multiple /> 
      </div> 
     </div> 

     <script> 
      Dropzone.options.myDropzone = { 
       url: "{{ asset("uploads/upload.php?target=menu_images") }}", 
      }; 
     </script> 

     <div class="submit_button"> 
      <div> 
       {{ Form::submit('Submit', array("class" => "btn btn-info submit", "role" => "button")) }} 
      </div> 
     </div> 
    </div> 
{{ Form::close() }} 

@stop

내 JS

$(document).ready(function(){ 
$(".add-form").submit(function(e){ 

    var formData = { 
     title : $('#title').val(), 
     image : $('.test_image').val(), 
    } 

    console.log(formData); 
    e.preventDefault(); 
}); 
}); 

내 불을 지르고 내가이

오브젝트 {제목 = "테스트, 이미지가 = undefined}

이 시도 :

Answer 1

IMG 태그는 일반적으로 어떤 속성 값이 없습니다. $ ('. test_image') ATTR ('값');

Answer 2

img -element에는 value 속성이 없습니다. 대신 src을 사용하십시오. 더 좋을 수도 이미지에 대한 ID를 사용하여 -

var formData = { 
    title : $('#title').val(), 
    image : $('.test_image').attr('src'), 
} 

이 단지 당신이 클래스를 참조하고 있기 때문에이 발생하는 첫 번째 test_image의 src 반환,하지만 조심.

$('#test_image').attr('src') 

Answer 3

이미지와 양식을 위해 아래의 코드를 사용 : -

$(document).on("submit", "form", function(evt) 
{ 
    evt.preventDefault(); 
    $.ajax({ 
     url: "<Your POST URl>", 
     type: 'POST', 
     dataType: "JSON", 
     data: new FormData(this), 
     success: function (data, status) { 
      // code here 
     }, 
     error: function (xhr, desc, err){ 
      // error handling code 
     } 
    });   

});