Question

我在让AJAX工作时遇到了问题。我环顾四周，但我似乎找不到任何有助于我如何构建代码的东西。

现在输入数据库的数据字段很好，但是我想添加文件上传（个人资料图片），但是当我查看网络选项卡时，它不会出现在表单数据中。我暂时对控制器本身并不太担心，但如何让AJAX请求将文件发送到控制器？

如果有人知道如何解决这个问题，我真的很感激。

谢谢！

AccountController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Http\Requests;
use Illuminate\Support\Facades\Auth;
class AccountController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        return view('Account.index');
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request)
    {
        $this->validate($request, [
            'name' => '',
            'email' => '',
            'telephone' => '',
            'job_title' => '',
            'profile_description' => '',
            'education' => '',
        ]);
        User::find(Auth::user()->id)->update([
            'name' => $request->get('name'),
            'email' => $request->get('email'),
            'telephone' => $request->get('telephone'),
            'job_title' => $request->get('job_title'),
            'profile_picture' => $request->get('profile_picture'),
            'profile_description' => $request->get('profile_description'),
            'education' => $request->get('education'),
        ]);
        $userImage = User::find(Auth::user()->id);
        if (!empty($request->file('profile_picture')) && $request->file('profile_picture')->isValid()) {
            $fileName = md5(time() . pathinfo($request->file('profile_picture')->getClientOriginalName(), PATHINFO_FILENAME)) . '.' . pathinfo($request->file('profile_picture')->getClientOriginalName(), PATHINFO_EXTENSION);
            $request->file('profile_picture')->move('profile-pictures', $fileName);
            $userImage->update([
                'profile_picture' => $fileName,
            ]);
        } else {
            $fileName = $request->get('old-image');
        }
        $userImage->update([
            'profile_picture' => $fileName,
        ]);
    }

表格的

<form class="form-horizontal" id="account-update" role="form" method="POST" action="{{ url('account.update', auth()->user()->id) }}" enctype="multipart/form-data">
  {{ csrf_field() }}
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>

    <div class="col-sm-10">
      <input name="name" type="text" class="form-control" id="name" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">
      <input name="email" type="email" class="form-control" id="email" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label for="telephone" class="col-sm-2 control-label">Contact Number</label>

    <div class="col-sm-10">
      <input name="telephone" type="telephone" class="form-control" id="telephone" placeholder="+(44)754 5635 950">
    </div>
  </div>

  <div class="form-group">
    <label for="job_title" class="col-sm-2 control-label">Job Description</label>

    <div class="col-sm-10">
      <input name="job_title" type="text" class="form-control" id="job_title" placeholder="Web Developer">
    </div>
  </div>

  <div class="form-group">
    <label for="profile_description" class="col-sm-2 control-label">About Me</label>

    <div class="col-sm-10">
      <textarea name="profile_description" class="form-control" id="profile_description" placeholder="Tell us about yourself..."></textarea>
    </div>
  </div>

  <div class="form-group">
    <label for="education" class="col-sm-2 control-label">Education</label>

    <div class="col-sm-10">
      <input name="education" type="text" class="form-control" id="education">
    </div>
  </div>

  <div class="form-group">
    <label for="profile_picture" class="col-sm-2 control-label">Profile Picture</label>

    <div class="col-sm-10">
      <input name="profile_picture" type="file" class="form-control" id="profile_picture">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn send-btn">Submit</button>
    </div>
  </div>
</form>

AJAX

<script>
$(document).ready(function(){
  $('#account-update').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
      url: '{{ route('account.update', auth()->user()->id) }}',
      enctype: 'multipart/form-data',
      method: "PUT",
      data: {
        'name':$('input[name=name]').val(),
        'email':$('input[name=email]').val(),
        'telephone':$('input[name=telephone]').val(),
        'job_title':$('input[name=job_title]').val(),
        'profile_description':$('textarea[name=profile_description]').val(),
        'education':$('input[name=education]').val(),
        'profile_picture': $('file[name=profile_picture]').val(),
        '_token': $('input[name=_token]').val()
      },
      success: function(data){
        console.log(data);
      }
    });
    return false;
  });
});
</script>

Answer 1

试试FormData。

FormData对象允许您编译要发送的一组键/值对使用XMLHttpRequest。它主要用于发送表单数据，但可以独立于表单使用，以便传输密钥数据。传输的数据格式与表格的格式相同如果表单的编码类型，submit（）方法将用于发送数据被设置为multipart / form-data。

$('#account-update').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData();

    // other inputs
    formData.append("userfile", $('file[name=profile_picture]').files[0]);

    //append some non-form data also
    formData.append('name',$('input[name=name]').val()),
    $.ajax({
        type: "POST",
        url: postDataUrl,
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
           //process data
        },
        error: function(data, textStatus, jqXHR) {
           //process error msg
        },
});

如何在Laravel中通过jQuery AJAX发布文件和数据

1 个答案: