将数据和文件以一种形式上传到 Laravel 中的 ajax答案

【问题标题】：Uploading data and file in one form to ajax in Laravel将数据和文件以一种形式上传到 Laravel 中的 ajax
【发布时间】：2016-10-20 02:45:48
【问题描述】：

我正在为我的注册页面使用引导模式。用户应该能够在此表单上输入他的图像以及信息。

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

如何在此代码中集成添加头像？

【问题讨论】：

标签： php jquery html ajax laravel

【解决方案1】：

我会这样做

创建一个单独的 Ajax 调用来处理图像的上传
上传图片后，您会返回对图片的引用（id？）并将其放在隐藏的<input type="hidden" value="image_id">
在提交表单时将图像添加到用户。 $user->add_image($image)

这当然需要Image 模型以及User 和Image（一对一？）之间的关系以及add_image 模型上的add_image 函数

【讨论】：

【解决方案2】：

首先添加 enctype="multipart/form-data" 到您的表单并将 name="photo" 添加到您的

   <input type="file">

这样

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

并将以下内容添加到您的控制器中

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

这会将图像保存到您的存储文件夹中

【讨论】：