將數據和文件以一種形式上傳到Laravel中的Ajax

Question

我在注冊頁面上使用了Bootstrap Modal。 用戶應該能夠在該表格上輸入他的圖像以及信息。

的HTML

<form method="POST">    
    <center>
        <img name="user_image" id="proPic" src="images/Profile_ICON.png">
    </center>
    <center>
        <label for="inputImg" id="upload_link"> Upload Image </label>
        <input type="file" id="inputImg" accept="image/*">
    ​</center>
    <input type="text" class="registrationForm" name="username" id="username" placeholder="Username">
    <center>
        <span id="user_name_error" class="error"></span>
    </center>
    <input type="text" class="registrationForm" name="email" id="email" placeholder="Email ID">
    <center>
        <span id="user_email_error" class="error"></span>
    </center>
    <input type="text" class="registrationForm" name="user_mobile_number" id="user_mobile_number" placeholder="Mobile Number">
    <center>
        <span id="user_mobile_error" class="error"></span>
    </center>
    <input type="text" class="registrationForm" name="user_address" id="user_address" placeholder="Address">
    <center>
        <span id="user_address_error" class="error"></span>
    </center>
    <input type="password" class="registrationForm" name="password" id="password" placeholder="Password">
    <center>
        <span id="user_password_error" class="error"></span>
    </center>
    <input type="password" class="registrationForm" name="user_confirm_password" id="user_confirm_password" placeholder="Confirm Password">
    <center>
        <span id="user_confirm_error" class="error"></span>
    </center>
    <button type="button" id="registrationBtn">REGISTER</button>
</form>

js / AJAX / jQuery

$("#registrationBtn").click(function(){
    var data = {
        'username':$('#username').val(),
        'email':$('#email').val(),
        'user_mobile_number':$('#user_mobile_number').val(),
        'user_address':$('#user_address').val(),
        'password':$('#password').val(),
        'user_confirm_password':$('#user_confirm_password').val()
    };

    $.ajax({
        url: "/signUp",
        method: 'POST',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        data: data,
        //dataType: 'json',
        success: function(data){
            $('#Modal-Register').modal('hide');
            $('#Modal-Login').modal('show');
        },
        error: function(data){
            var errors = data.responseJSON;

            if (errors.hasOwnProperty('username')){
                $('#user_name_error').html(errors.username);
            }
            else {
                $('#user_name_error').html('');
            }

            if(errors.hasOwnProperty('email')){
                $('#user_email_error').html(errors.email);
            }
            else {
                $('#user_email_error').html('');
            }

            if(errors.hasOwnProperty('user_mobile_number')){
                $('#user_mobile_error').html(errors.user_mobile_number);
            }
            else {
                $('#user_mobile_error').html('');
            }

            if(errors.hasOwnProperty('user_address')){
                $('#user_address_error').html(errors.user_address);
            }
            else {
                $('#user_address_error').html('');
            }

            if(errors.hasOwnProperty('password')){
                $('#user_password_error').html(errors.password);
            }
            else {
                $('#user_password_error').html('');
            }

            if(errors.hasOwnProperty('user_confirm_password')){
                $('#user_confirm_error').html(errors.user_confirm_password);
            }
            else {
                $('user_confirm_error').html('');
            }
        }
    });
});

控制者

class UserController extends Controller{
    public function signUp(Request $request){
        $this->validate($request,[
            'username' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'user_mobile_number' => 'required|max:255',
            'user_address' => 'required',
            'password' => 'required|min:6',
            'user_confirm_password' => 'required|same:password'
        ]);

        $user = new User;
        $user->username=$request->input('username');
        $user->email=$request->input('email');
        $user->user_mobile_number =$request->input('user_mobile_number');
        $user->user_address=$request->input('user_address');

        $password = Hash::make($request->input('password'));
        $user->password = $password;

        if ($user->save()){
            echo "Successfully registered";
        }
        else{
            echo "Failed to register";
        }
    }
}

如何將個人頭像添加到此代碼中？

Answer 1

這是我會做的

• 創建一個單獨的Ajax調用來處理圖像的上傳
• 上載圖像后，您將返回對圖像的引用（id？）並將其放置在隱藏的<input type="hidden" value="image_id">
• 提交表單時，將圖像添加到用戶。 $user->add_image($image)

當然，這需要一個Image模型以及User和Image之間的關系（一對一？）以及User模型上的add_image函數。

Answer 2

首先，將enctype =“ multipart / form-data”添加到您的表單中，然后將name =“ photo”添加到您的表單中

   <input type="file"> 

像這樣

    <input type="file" name="photo"/>

並將以下內容添加到您的控制器中

  $path = $request->photo->storeAs('images', 'filename.jpg');

這會將圖像保存到您的存儲文件夾中