Je veux télécharger un profil image d'un user sur le serveur et je suis bloqué lors du téléchargement ajax de l'image

Toutes les données de mon formulaire sont publiées sur database, y compris le image name, mais le fichier n'est pas téléversé sur le serveur

Ma vue est

//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);
            }
        });

    });
}); 

Mon contrôleur est

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);

        }
    }
}

Je suppose qu'il me manque quelque chose dans ajax posting, mais je n'ai pas pu le comprendre

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

Le résultat est

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

J'ai vérifié le C:\wamp\tmp\php47F2.tmp enen là je ne trouve pas l'image

Dans l'attente d'une aide indispensable

Merci

7
Mr Robot 24 janv. 2017 à 08:43

5 réponses

Meilleure réponse

Essayez d'utiliser FormData dans ajax pendant que vous importez un fichier.

Essayez ça

$('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);
        }
    });

});

OU

Vous pouvez essayer avec ceci jQuery library

https://github.com/malsup/form

MODIFIER

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 the 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');
    }
}
8
Payam Khaninejad 6 sept. 2018 à 07:16

Je vais vous expliquer en utilisant un exemple simple.

HTML:

<form id="header_image_frm" method="POST" action="">
    <input type="file" name="header_image" id="header_image" value="Upload Header Image">
</form>

JS: (propriétés d'ajax appelées contentType, processData doit)

<script>
  $(document).ready(function() {
    $('#header_image').change(function() {
        let formData = new FormData($('#header_image_frm')[0]);
        let file = $('input[type=file]')[0].files[0];
        formData.append('file', file, file.name);
        $.ajax({
            url: '{{ url("/post/upload_header") }}',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: 'POST',   
            contentType: false,
            processData: false,   
            cache: false,        
            data: formData,
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log(data);
            }
        });
    });
  });
</script>

Laravel / PHP:

public function upload(Request $request) {
  if ($_FILES['file']['name']) {
    if (!$_FILES['file']['error']) {
        $name = md5(rand(100, 200));
        $ext = explode('.', $_FILES['file']['name']);
        $filename = $name . '.' . $ext[1];
        $destination = public_path() . '/images/' . $filename;
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo '/images/' . $filename;
    } else {
        echo = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
    }
  }
}
0
namal 27 févr. 2020 à 08:45

Juste moi ou votre <input type="file"> n'a-t-il pas d'attribut "nom"? Par conséquent, le serveur ne reçoit pas les données du fichier de la poste?

ÉDITER:

Après avoir inséré l'enregistrement dans la base de données, vous gérez ensuite le téléchargement du fichier - mais vous ne mettez jamais à jour l'enregistrement avec le nom des fichiers.

* Confirmez simplement que le fichier a été téléchargé.

2
Andrew 24 janv. 2017 à 06:22

Essayez quelque chose comme ceci:

$('#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
                }
         });
    });
3
Mayank Pandeyz 24 janv. 2017 à 05:49

Attribut de nom non défini pour l'entrée de type de fichier. Peut être?

0
Sidra 24 janv. 2017 à 06:08