logo标签列表

如何使用PHP和jQuery AJAX上传文件并插入数据

phpjqueryajaxcodeigniterjquery-file-upload
6
我无法通过ajax上传文件并使用ajax发送数据到php文件。我的代码只上传文件，没有将数据发送到php代码。我创建了一个表单，并使用ajax在单击时将函数发送到php。我正在使用codeigniter。
这是我的表单：
<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>

这是使用Ajax将JavaScript发送到PHP的代码：
$('#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);
    }  
  });
});

我已经尝试使用 $_POST['message']; 和 $this->input->post("message");，但都不起作用。 这是处理代码的 PHP：
<?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);
  }
}

在数据库中，我只发送了文件上传的名称、用户信息和用户ID，并没有发送其他内容。
1
尽量避免使用隐藏字段发送数据，而是使用会话(Session)来传递数据。 - kunal
@kunal 我的消息无法捕捉到。这条消息没有隐藏字段。 - Stfvns
看起来你正在通过隐藏字段传递userid和message，你可以使用auth组件或者session来代替。不能直接传递userid到隐藏字段中，因为任何人都可以更改userid。希望你能理解并且这对未来的编码有所帮助。 - kunal
你的函数中有打印 $_FILES 吗？ - kunal
@kunal，好的用户ID。它是错误的...看到那条消息，它是文本类型。$_FILES可以工作，但消息不起作用。 - Stfvns
4个回答
4

我认为你的问题可能出现在ajax代码中，因为你正在使用formData对象。尝试将消息变量与它附加。

$('#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);
    }  
  });
});
0
尝试编写类似这样的ajax代码。
  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) {

    }
  });

如果您的控制器像这样，那么它对我来说是可用的代码

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

我认为@kunal所说的重点是，您不应将可能包含敏感数据的内容添加为隐藏输入（任何人都可以更改它），而应直接引用类中保存的这些字段的值，然后再将其添加到数据库中。此外，使用嵌入式变量会使您的应用程序容易受到SQL注入攻击，因此请使用预处理语句。

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

我在玩弄您的原始JavaScript/jQuery代码时，无法使该函数工作（因为我不使用jQuery，所以我只是猜测），但是使用常规的纯JavaScript可以像这样实现~顶部的php代码部分实际上并不相关，因为您将向home/send_chat发送ajax请求

<?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>
我已经编辑了我的问题，但我的消息仍未发送。请问我的问题出在哪里？:( - Stfvns
0

使用ajax提交所有数据，包括文件或不包括文件

<form method="post" action="" enctype="multipart/form-data" id="form"/>
   // your own input fields
</form>

$("#form").submit(function (event) {
 event.preventDefault();
 //tinyMCE.triggerSave();
$.ajax({
    url: "<?php echo base_url('your_own_controller/your_own_method'); ?>",
    type: "post",
    data: new FormData(this),
    processData: false,
    contentType: false,
    cache: false,
    async: false,

    beforeSend: function () {}, //if you like to do something before submit
    complete: function () {}, //if you like to do something before submit 

    success: function (response) {
     //check response and do some your own stuff
    };
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接