Загрузите файл изображения и текстовые поля, используя ajax и Laravel - PullRequest
Новая
       8

Загрузите файл изображения и текстовые поля, используя ajax и Laravel

0 голосов
/ 17 апреля 2020

Есть ли какое-либо решение для загрузки изображения с некоторыми текстовыми полями, используя Ajax Я пробовал множество решений более 5 часов без какого-либо хорошего результата. это мой код: 

 var data = new FormData();   

 $.ajax({
    url: "upload.php",
    data: data,
    dataType: 'JSON',
    cache: false,
    //contentType: false,
    processData: false,
    method: 'POST',
    success: function(data){
        alert(data.success);
    }
});

HTML код: 

<form action="{{ url('/compaign') }}" method="POST" id="xhr" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <fieldset>
                    <legend class="font-weight-semibold"><i class="icon-cash3 mr-2"></i>Payment information</legend>
                    <div class="form-group">
                        <div class="xhr-block">
                            <label>Brand Name:</label>
                            <input type="text" name="compaign_brand" class="form-control" placeholder="Apple">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="xhr-block">
                            <label>Content Type:</label>
                            <select name="compaign_content_type" data-placeholder="Select your content type" class="form-control form-control-select2" data-fouc>
                                <option value=""></option>
                                <option value="1">Article</option>
                                <option value="2">Web Application</option>
                                <option value="3">Mobile Application</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Content Image:</label>
                        <input type="file" name="image" class="form-control-uniform">
                    </div>

                </fieldset>
            </div>
            <div class="card-footer bg-transparent justify-content-between">
                <div class="text-right">
                    <button type="submit" class="btn btn-primary">Enregistrer et Continuer <i class="icon-paperplane ml-2"></i></button>
                </div>
            </div>
        </form>

Что нужно идентифицировать, потому что на самом деле я пробовал много способов, я хочу получить поля формы и загрузить изображение в то же время

спасибо

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Файловые функции. js

var xhr = function(form){
var form = $("#xhr");
var data = new FormData(form[0]);   

$.ajax({
    url: $(this).attr('action'),
    data: data,
    dataType: 'JSON',
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    success: function(data){
        alert(data.success);
    }
});
}

индексная страница: я вызываю функции. js в моем заголовке и я 

$(function(){
// When Form #xhr is Submited
$('#xhr').on("submit", function(){
    xhr("#xhr");
    return false;
});
});
0 голосов
/ 17 апреля 2020

Попробуйте следующее:

var form = $('form')[0]; var data = new FormData(form);

Убедитесь, что они ложные

contentType: false, // requires jQuery 1.6+ processData: false,

...