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之间的关系（一对一？）和add_image User函数模型

Answer 2

首先添加 ENCTYPE =＆＃34;多部分/格式数据＆＃34;到您的表单并添加名称=＆＃34;照片＆＃34;到你的

   <input type="file">

喜欢这个

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

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

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

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

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

2 个答案: