Wie man Datei hochlädt und Daten mit php eingibt jquery ajax

Question

Ich kann nicht über AJAX zu php Dateiupload und Daten mit ajax senden. This my code just send file upload. Daten werden nicht an meinen PHP-Code gesendet. Ich erstelle Form und die Funktion send auf Klick mit Ajax, um auf PHP zu posten. I'm using codeigniter

Das ist meine Form:

<form action="<?php echo site_url('home/send_chat');?>" method="post" enctype="multipart/form-data"> 
    <input name="message" id="message" type="text" class="form-control input-sm" /> 
    <input type="file" id="file" name="file" /> 
    <br /> 
    <span class="input-group btn"> 
    <button type="submit" class="btn btn-info btn-sm" id="submit">Enkripsi</button> 
    </span> 
</form> 

Diese Javascript Post auf php senden Ajax:

$('#submit').on('click', function(){ 
    var message = $('#message').val(); 

    var fd = new FormData(this); 
    fd.append('file',$('#file')[0].files[0]); 

    $.ajax({ 
    method:"POST", 
    url:"<?php echo site_url('home/send_chat');?>",  
    data: {fd,message:message}, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function(data){     
     alert(data); 
    }, 
    error: function(xhr, status, error) { 
     alert(xhr.responseText); 
    } 
    }); 
}); 

Ich bin versuchen bereits mit $_POST['message']; und $this->input->post("message"); seine nicht beide arbeiten Diese PHP Prozesscode:

<?php if (! defined('BASEPATH')) exit('No direct script access allowed'); 
class Home extends CI_Controller { 
    public function send_chat() 
    { 
    $name = $_FILES['file']['name']; 
    $error = $_FILES['file']['error']; 
    $size = $_FILES['file']['size']; 


    // $message = $_POST['message']; 
    $message = $this->input->post("message"); 

    $user = $this->session->userdata('username'); 
    $iduser = $this->session->userdata('userID'); 



    $insert="insert into chat (user,message,id_user,fileupload) VALUES ('$user','$message','$userid','$name')"; 
    $this->db->query($insert); 
    } 
} 

In der Datenbank bin ich nur senden Name Datei upload.user, Nachricht und iuser seine nicht senden.

Answer 1

ich denke, Ihr Problem in der ajax-Code würden das Senden sein kann da Sie Formdata-Objekt verwenden. versuchen, die Nachricht Variable anhängen damit

$('#submit').on('click', function(){ 

    var fd = new FormData(this); 
    fd.append('file',$('#file')[0].files[0]); 
    fd.append('message ',$('#message').val()); 

    $.ajax({ 
    method:"POST", 
    url:"<?php echo site_url('home/send_chat');?>",  
    data: fd, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function(data){     
     alert(data); 
    }, 
    error: function(xhr, status, error) { 
     alert(xhr.responseText); 
    } 
    }); 
}); 

Answer 2

versuchen, Ajax-Code wie folgt zu machen.

var data = new FormData(); 
    jQuery.each(jQuery('#file')[0].files, function(i, file) { 
    data.append('file', file); 
    }); 
    $.ajax({ 
    type : "POST", 
    url : "<?=base_url()?>home/send_chat", 
    data : data, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function(data) { 

    } 
    }); 

und dem Controller machen, wie diese es funktioniert Code für mich

class Home extends CI_Controller { 

    function singleImageUpload($upload_name,$folder,$extension,$bnr,$filename) 
    { 
     if($folder == '') 
     { 
      $config['upload_path'] = 'images/agent'; 
     } 
     else 
     { 
      $config['upload_path'] = 'upload/'.$folder."/"; 
     } 
     $config['allowed_types'] = '*'; 
     if($bnr == 2) 
     { 
      $config['max_width'] = '3000'; 
      $config['max_height'] = '3000'; 
     } 
     elseif ($bnr == 1) 
     {} 
     // $config['file_name'] = $user_name.date('YmdHis').".".$extension; 
     $config['file_name'] = $filename; 

     $this->upload->initialize($config); 
     $this->load->library('upload', $config); 
     if (! $this->upload->do_upload($upload_name)) 
     { 
      $arrayRetutn['upload'] = 'False'; 
      $arrayRetutn['error'] = $this->upload->display_errors(); 
     } 
     else 
     { 
      $arrayRetutn['upload'] = 'True'; 
      $arrayRetutn['data'] = $this->upload->data(); 
     } 
     //echo '<pre>';print_r($arrayRetutn);echo '</pre>'; die; 
     return $arrayRetutn; 
    } 

    public function send_chat() 
    { 
    $user = $this->input->post("user"); 
    $message = $this->input->post("message"); 
    $iduser = $this->input->post("iduser"); 

    if(isset($_FILES['file']['name']) && $_FILES['file']['name'] != '') 
    { 
     $image_name = explode(".",$_FILES['file']['name']); 
     $imgData = $this->singleImageUpload('file','your folder name',$image_name[1],'2',$_FILES['file']['name']); 
     if($imgData['upload']=='True') 
     { 
      $name = $imgData['data']['file_name']; 
     } 
    } 

    $insert="insert into chat (user,message,id_user,fileupload) VALUES ('$user','$message','$iduser','$name')"; 
    $this->db->query($insert); 
    } 
} 

Answer 3

Ich denke, der Punkt @kunal war machte, dass Sie nicht potentiell sensible Daten als versteckte Eingänge sollte hinzufügen (jeder kann es ändern) sollte aber auf die Werte verweisen, die in diesen Feldern direkt in Ihrer Klasse enthalten sind, bevor Sie sie zur Datenbank hinzufügen. Zusätzlich zu eingebetteten Variablen öffnet Ihre App zu SQL Injection, also verwenden Sie eine vorbereitete Anweisung.

<?php 

    if (! defined('BASEPATH')) exit('No direct script access allowed'); 


    class Home extends CI_Controller { 
     public function send_chat(){ 
     $name = $_FILES['file']['name']; 
     $error = $_FILES['file']['error']; 
     $size = $_FILES['file']['size']; 

     $user = $this->session->userdata('username'); 
     $iduser = $this->session->userdata('userID'); 
     $message = $this->input->post("message"); 


     $sql="insert into `chat` (`user`, `message`, `id_user` ,`fileupload`) values (?,?,?,?)"; 
     $stmt=$this->db->prepare($sql); 
     if($stmt){ 
      $stmt->bind_param('ssss',$user,$message,$userid,$name); 
      $stmt->execute(); 
     } 
     } 
    } 

Ich spielte mit Ihrem ursprünglichen Javascript/code jQuery, konnte aber nicht die Funktion zu arbeiten (ich benutze jQuery nicht so war Erraten ich), aber mit regulärem, Vanille javascript Sie es so tun können ~ der Anteil des pHP-Code an der Spitze ist nicht wirklich relevant, wie Sie den ajax-Request an home/send_chat

<?php 
    if($_SERVER['REQUEST_METHOD']=='POST'){ 
     ob_clean(); 
     /* send some sort of response... */ 
     echo json_encode($_POST); 

     exit(); 
    } 
?> 
<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8' /> 
     <title>xhr upload - no jquery</title> 
     <script> 
      document.addEventListener('DOMContentLoaded',function(){ 

       var callback=function(data){ 
        alert(data) 
       } 

       document.getElementById('submit').onclick=function(e){ 
        e.preventDefault(); 
        var url='<?php echo site_url('home/send_chat');?>'; 

        var _file=document.querySelector('input[type="file"]'); 
        var _form=document.querySelector('form[id="usr-upload"]'); 

        var xhr = new XMLHttpRequest(); 
        var fd=new FormData(_form); 
         fd.append('file', _file.files[0]); 

        xhr.onreadystatechange=function(){ 
         if(xhr.readyState==4 && xhr.status==200)callback.call(this, xhr.response); 
        }; 
        xhr.onerror=function(err){ 
         alert(err); 
        }; 
        xhr.open('POST',url,true); 
        xhr.send(fd); 
       }; 
      },false); 
     </script> 
    </head> 
    <body> 
     <form id='usr-upload' method='post' enctype='multipart/form-data'> 
      <input name='message' type='text' /> 
      <input type='file' name='usrfile' /> 
      <br /> 
      <span class='input-group btn'> 
      <input type='button' value='Enkripsi' id='submit' /> 
      </span> 
     </form> 
    </body> 
</html>