Загрузка файла Ajax с данными формы Laravel 5.3

Я хочу загрузить изображение профиля user на сервер, и я застрял в ajax-загрузке изображения

все мои данные формы отправляются в database включая image name но файл не загружается на сервер

мой взгляд

 //form <form id="example-form" method="post" enctype="multipart/form-data"> {!! csrf_field() !!} <div class="row"> <div class="col m12"> <div class="row"> <div class="input-field col m12 s12"> <input id="name" name="name" type="text" placeholder="Full Name" class="required validate"> </div> <div class="input-field col s12"> <input id="email" name="email" type="email" placeholder="Email" class="required validate"> </div> <div class="input-field col s12"> <input id="phone_number" name="phone_number" type="tel" placeholder="Phone Number" class="required validate"> </div> <div class="input-field col m6 s12"> <input id="address" name="address_city_village" type="text" placeholder="Address City Village"> </div> <div class="input-field col m6 s12"> <input id="state" name="address_state" type="text" placeholder="State"> </div> <div class="input-field col s12"> <input id="password" name="password" type="password" placeholder="Password" class="required validate"> </div> <div class="input-field col s12"> <input id="confirm" name="confirm" type="password" placeholder="Confirm Password" class="required validate"> </div> <div class="file-field input-field col s12"> <div class="btn teal lighten-1"> <span>Image</span> <input type="file" name="image"> </div> <div class="file-path-wrapper"> <input class="file-path validate" type="text" > </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="waves-effect waves-green btn blue">Submit</button> </div> </form> //ajax $(document).on("click", ".agent-add", function () { var agent_id = $(this).data('id'); $('form').submit(function(event) { event.preventDefault(); $.ajax ({ url: '{{ url('/agents') }}', type: 'POST', data: { "_method": 'POST', "name": $('input[name=name]').val(), "email": $('input[name=email]').val(), "phone_number": $('input[name=phone_number]').val(), "address_city_village": $('input[name=address_city_village]').val(), "address_state": $('input[name=address_state]').val(), "image": $('input[name=image]').val(), "password": $('input[name=password]').val() }, success: function(result) { location.reload(); }, error: function(data) { console.log(data); } }); }); }); 

мой контроллер

 public function store(Request $request) { if (User::where('phone_number', '=', Input::get('phone_number'))->exists()) { return $this->respondBadRequest('Phone Number Exists'); } else { User::create($request->all()); return redirect('agents')->with('Success', 'Agent Added'); if($request->hasFile('image')) { $file = $request->file('image'); //you also need to keep file extension as well $name = $file->getClientOriginalName().'.'.$file->getClientOriginalExtension(); //using array instead of object $image['filePath'] = $name; $file->move(public_path().'/uploads/', $name); } } } 

я думаю, что я что-то пропускаю в ajax posting , но я не мог понять это

i dd($request->all());

результат

 array:9 [▼ "_token" => "heSkwHd8uSIotbqV1TxtAoG95frcRTATgeGL0aPM" "name" => "fwe" "email" => "sanjiarya2112@gmail.com" "phone_number" => "4444422555" "address_city_village" => "sgf" "address_state" => "gfdgsdf" "password" => "ffffff" "confirm" => "ffffff" "image" => UploadedFile {#208 ▼ -test: false -originalName: "Screenshot (8).png" -mimeType: "image/png" -size: 135920 -error: 0 path: "C:\wamp\tmp" filename: "php47F2.tmp" basename: "php47F2.tmp" pathname: "C:\wamp\tmp\php47F2.tmp" extension: "tmp" realPath: "C:\wamp\tmp\php47F2.tmp" aTime: 2017-01-24 06:14:40 mTime: 2017-01-24 06:14:40 cTime: 2017-01-24 06:14:40 inode: 0 size: 135920 perms: 0100666 owner: 0 group: 0 type: "file" writable: true readable: true executable: false file: true dir: false link: false linkTarget: "C:\wamp\tmp\php47F2.tmp" } ] 

Я проверил C:\wamp\tmp\php47F2.tmp там, я не нашел изображение

с нетерпением жду очень необходимой помощи

Спасибо

Попробуйте использовать FormData в ajax во время загрузки файла.

Просто попробуйте это

 $('form').submit(function(event) { event.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ url: '{{ url('/agents') }}', type: 'POST', data: formData, success: function(result) { location.reload(); }, error: function(data) { console.log(data); } }); }); 

ИЛИ

Вы можете попробовать эту library jQuery

https://github.com/malsup/form

РЕДАКТИРОВАТЬ

 public function store(Request $request) { if (User::where('phone_number', '=', Input::get('phone_number'))->exists()) { return $this->respondBadRequest('Phone Number Exists'); } else { $user=User::create($request->all()); if($request->hasFile('image')) { $file = $request->file('image'); //you also need to keep file extension as well $name = $file->getClientOriginalName().'.'.$file->getClientOriginalExtension(); //using array instead of object $image['filePath'] = $name; $file->move(public_path().'/uploads/', $name); $user->image= public_path().'/uploads/', $name; $user->save(); } return redirect('agents')->with('Success', 'Agent Added'); } } 

Попробуйте что-то вроде этого:

 $('#upload').on('click', function() { var file_data = $('#pic').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); $.ajax({ url : 'route_url', dataType : 'text', // what to expect back from the PHP script, if anything cache : false, contentType : false, processData : false, data : form_data, type : 'post', success : function(output){ alert(output); // display response from the PHP script, if any } }); }); 

Только у меня или у вашего <input type="file"> нет атрибута "name"? Поэтому сервер не получает данные файла из сообщения?

РЕДАКТИРОВАТЬ:

После того, как вы вставляете запись в базу данных, вы затем обрабатываете загрузку файла, но вы никогда не обновляете запись с именем файла.

* Просто подтвердите, что файл был загружен.

атрибут имени не установлен для ввода типа файла. Может быть?