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

在我的萤火虫中我有这个

对象{title =＆＃34; test，image = undefined}

Answer 1

img-tag通常没有属性值：Check This

试试这个： $（＆＃39; .test_image＆＃39）。ATTR（＆＃39;值＆＃39）;

Answer 2

img - 元素没有value属性。请改用src。

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

但请注意，这只会返回它遇到的第一个src的{{1}}，因为您指的是一个类 - 使用 id 表示您的图片可能是更好。

test_image

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

});

如何使用ajax插入图像

3 个答案: