使用 ajax 和 Laravel 上传文件图像和文本字段答案

【问题标题】：Upload file image and text fields using ajax and Laravel使用 ajax 和 Laravel 上传文件图像和文本字段
【发布时间】：2020-07-30 10:55:34
【问题描述】：

是否有任何解决方案可以使用 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>

id应该是什么，因为我真的尝试了很多方法，我想同时接收表单字段和上传图片

谢谢

【问题讨论】：

标签： php jquery ajax laravel file-upload

【解决方案1】：

尝试以下方法：

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

确保这些都是假的

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

【讨论】：

此路由不支持 POST 方法。支持的方法：GET、HEAD、PUT、PATCH、DELETE。
您选择的表格是否正确？试试var form = $('#xhr')[0];
请检查我的答案，我已经在我的答案中解释了
如果你得到POST method not supported，这意味着你的action={{ url('/compaign') }}的路由在你的routes/web.php或routes/api.php文件中没有设置为Route::post，你应该去那个文件看看.
我已经：Route::resource('/compaign', 'CompaignController');

【解决方案2】：

文件functions.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);
    }
});
}

索引页面：我在标题中调用functions.js 我愿意

$(function(){
// When Form #xhr is Submited
$('#xhr').on("submit", function(){
    xhr("#xhr");
    return false;
});
});

【讨论】：