通过ajax将图像粘贴到laravel控制器

Question

我正在尝试通过ajax将带有图像（文件）的表单发送到laravel后端。

目前我正试图让它与表单数据一起工作，但我能得到的只是参数而不是文件......

我只是在控制台中输出内容，稍后将使用 ajax

在保存单击时，当前显示的图像也应替换为上传的图像

 $(document).ready(function() { $('a[data-action=edit]').on('click', function() { $('.box-tools').addClass('hide'); $(this).closest(".box-primary").find('dl.view-data, .box-tools').addClass('hide'); $(this).closest(".box-primary").find('.spinner, form.form-data').removeClass('hide'); }); $('a[data-action=cancel]').on('click', function() { $('.box-tools').removeClass('hide'); $(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide'); $(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide'); }); $('a[data-action=save]').on('click', function() { var form = $(this).closest('form.form-data'), formData = new FormData(), formParams = form.serializeArray(); $.each(form.find('input[type="file"]'), function(i, tag) { $.each($(tag)[0].files, function(i, file) { formData.append(tag.name, file); }); }); $.each(formParams, function(i, val) { formData.append(val.name, val.value); }); console.log(formData); console.log(formParams); // alert($(this).closest('form.form-data').serialize()); // alert($(this).closest('.box-primary').attr('id')); $('.box-tools').removeClass('hide'); $(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide'); $(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide'); }); $('#file').on('change', function() { var file = document.getElementById("file"); $('.file-name > span[data-text]').html(file.value); $('a[data-action=remove-file]').removeClass('hide'); }); $('a[data-action=remove-file]').on('click', function() { $('a[data-action=remove-file]').addClass('hide'); }); });

 .box.box-primary { border-top-color: #00acd6; } .box { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); border-top: 3px solid #dddddd; } .box { position: relative; background: #ffffff; border-top: 2px solid #c1c1c1; margin-bottom: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 100%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); } .hide { visibility: hidden; } .file-wrapper input[type="file"] { cursor: pointer; font-size: 100px; height: 100%; filter: alpha(opacity=1); -moz-opacity: 0.01; opacity: 0.01; position: absolute; right: 0; top: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box box-primary" id="profile-picture"> <div class="box-header"> <h3 class="box-title">Profilbild</h3> <div class="box-tools block-action permanent pull-right"> <a href="javascript:void(0)" class="btn btn-default" data-action="edit"> EDIT </a> </div> </div> <div class="box-body"> <div class="text-center"> <div class="small spinner hide"> <div>Loading…</div> </div> </div> <dl class="dl-horizontal view-data"> <dt></dt> <dd class="text-right"> <img class="img-rounded profile" alt="Avatar" src="/img/no-avatar.png"> </dd> </dl> <form class="form-horizontal hide form-data" role="form"> <input type="hidden" name="_token" value="b4AniUckmBZqImpPqFbVhkDWlUwKQ7oiUKDXwAyE"> <div class="form-group"> <label class="col-sm-3 control-label">Neues Profilbild</label> <div class="col-sm-9"> <div class="file-field clearfix" style="margin-top:3px"> <div class="file-wrapper"> <input type="file" id="file" name="file"> <button class="btn btn-default btn-sm" data-action="change-file">Profilbild hochladen</button> </div> <div class="file-name"> <span data-text=""></span> <a href="javascript:void(0)" data-action="remove-file" class="remove-file btn btn-link btn-sm pull-right hide"> <i class="glyphicon glyphicon-remove"></i> </a> </div> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-8"> <a href="javascript:void(0)" class="btn btn-primary" data-action="save">Speichern</a> <a href="javascript:void(0)" class="btn btn-default" data-action="cancel">Zurück</a> </div> </div> </form> </div> </div>

Answer 1

首先，您需要将属性enctype="multipart/form-data"到您的表单标签中，如下所示：

<form class="form-horizontal hide form-data" role="form" enctype="multipart/form-data">

并且无法在控制台窗口中检查 formData 你应该使用这种方式

for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

最后提交数据使用ajax调用

 $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });