javascript - 通过 ajax 将图像粘贴到 laravel Controller

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