Question

我正在使用codeigniter，但是当我使用ajax提交表单时，我无法从视图到Controller获取字段数据。从过去2天开始，我正在研究它，但无法找到解决方案。当我打印字段值时，它显示空白，即没有值。我只想使用ajax提交数据，没有正常发布。请帮助解决我的问题。

这是我的代码：

查看

$(document.body).on('click', '.postbtn' ,function(e){
    e.preventDefault();
    $('#posting_comment').submit();
});

<script type="text/javascript">
function sendCareerData()
{

    var fdata = new FormData(document.getElementById("posting_comment"));

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url();?>"+"dashboard/do_upload",
        data: fdata,
        mimeType:"multipart/form-data", 
        contentType: 'text',
        cache: false,
        processData:false,
        dataType: 'html', 
        success: function (data) {
          alert("d"+data);
        },
            error: function(jqXHR, textStatus, errorThrown) 
        {
            console.log( errorThrown );  
        }

    });

    return false;
}

</script>

<form name="posting_comment" id="posting_comment" method="post" enctype="multipart/form-data" onsubmit="return sendCareerData()">
      <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
      <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
      <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post"/>
</form>

控制器：

public function do_upload()
    {
$comment_topic=$_POST['comment_topic'];
$attachment_file=$_POST['attachment_file'];
$config['upload_path'] ='./uploads/';
$config['allowed_types'] = 'gif|jpg|png||jpeg';
$config['max_width'] = 1000;
$config['max_height'] = 1000;
$config['max_size'] = 20000000;
$config['encrypt_name'] = FALSE;
$this->load->library('upload', $config);
$this->upload->do_upload($file_names);
    }

$comment_topic和$attachment_file都包含空白值。

Answer 1

在你的＆＃34;视图＆＃34;代码，你做了几个错误，如下：

<强> 1 即可。按钮点击事件应位于<script>代码和ready()事件

内

<script>
$(document).ready(function() {
    $(document.body).on('click', '.postbtn' ,function(e){
        e.preventDefault();
        $('#posting_comment').submit();
    });
});
</script>

<强> 2 即可。在AJAX中，更改 contentType：＆＃39; text＆＃39;为假

jQuery.ajax({
    type: "POST",
    url: "<?php echo base_url();?>"+"dashboard/do_upload",
    data: fdata,
    mimeType:"multipart/form-data", 
    contentType: false, // change 'text' to false
    cache: false,
    processData:false,
    dataType: 'html', 
    success: function (data) {
      alert("d"+data);
    },
        error: function(jqXHR, textStatus, errorThrown) 
    {
        console.log( errorThrown );  
    }

});

第3 即可。控制器的变化：

您使用了$_POST['attachment_file']，$_FILES['attachment_file']，用于访问上传的文件。

<强> 4 即可。在上传功能中提供文件控制名称：

替换此=> $这 - ＆GT; upload-＆GT; do_upload（$ file_names）;

with this =＆gt; $这 - ＆GT; upload-＆GT; do_upload（＆＃34; attachment_file＆＃34）;

在根目录中创建＆＃34;上传＆＃34; 文件夹。

这些纠正之后正在努力......

完整代码：

Controller（demo.php）：

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

class Demo extends CI_Controller {

function __construct()
{
    parent::__construct();
}

function uploadview()
{
    $this -> load -> view("uploadview");
}

function do_upload()
{
    $comment_topic=$_POST['comment_topic'];
    $attachment_file=$_FILES['attachment_file']['name'];
    $config['upload_path'] ='./uploads/';
    $config['allowed_types'] = 'gif|jpg|png||jpeg';
    $config['max_width'] = 1000;
    $config['max_height'] = 1000;
    $config['max_size'] = 20000000;
    $config['encrypt_name'] = FALSE;
    $this->load->library('upload', $config);
    if($this->upload->do_upload("attachment_file")){
        echo "File $attachment_file Uploaded with Comment: $comment_topic";
    } else {
        echo "Upload Failed";
    }
}

查看（uploadview.php）：

<html>
<head>
    <script type="text/javascript" src="<?php echo base_url() . "application/assets/public/"; ?>js/jquery-2.0.0.min.js"></script>
<script>
    $(document).ready(function() {
        $(document.body).on('click', '.postbtn' ,function(e){
            e.preventDefault();
            $('#posting_comment').submit();
        });
    });

    function sendCareerData()
    {
        var fdata = new FormData(document.getElementById("posting_comment"));

        jQuery.ajax({
            type: "POST",
            url: "<?php echo base_url();?>"+"demo/do_upload",
            data: fdata,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            dataType: 'html',
            success: function (data) {
                alert("result: "+data);
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                console.log( errorThrown );
            }

        });

        return false;
    }
</script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <br/>
            <form name="posting_comment" id="posting_comment" method="post" enctype="multipart/form-data" onsubmit="return sendCareerData()">
                <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
                <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
                <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post"/>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<强>输出：

Answer 2

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
    <script>
      $(function () {
        $('#your_form_id').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'your receiver page URL',
            data: $('#your_form_id').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    </script>

Answer 3

这是你的答案

首先在您的控制器中复制并粘贴此代码

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * User class.
 * 
 * @extends CI_Controller
 */
class Dashboard extends CI_Controller {

    /**
     * __construct function.
     * 
     * @access public
     * @return void
     */
    public function __construct() {

        parent::__construct();

               }

    public function index()
    {
           $this->load->library('upload');
          $this->load->helper(array('url'));
          $this->load->view('Test');
    }   
       public function do_upload()
           {
             $comment_topic=$this->input->post("comment_topic");
          $attachment_file=$_FILES["attachment_file"];
         $output_dir = "uploads/";
           $fileName = $_FILES["attachment_file"]["name"];
     move_uploaded_file($_FILES["attachment_file"]["tmp_name"],$output_dir.$fileName);
           }
    }

然后将此代码复制并粘贴到视图文件

中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
function sendCareerData()
{

    var data = new FormData($('#posting_comment')[0]);


     $.ajax({
               type:"POST",
               url:"<?php echo site_url('Dashboard/do_upload');?>",
               data:data,
               mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
               success:function(data)
              {
                        console.log(data);

               }
       });

}

</script>

<form name="posting_comment" id="posting_comment" >
      <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
      <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
      <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post" onclick = "return sendCareerData()"/>
</form>

现在运行并查看结果以获取有关ajx的更多信息，请阅读此http://w3code.in/2015/10/how-to-edit-delete-and-update-data-without-refreshing-page-in-codeigniter/，对于文件上传，请阅读此http://w3code.in/2015/09/upload-file-using-codeigniter/和http://w3code.in/2015/10/how-to-upload-file-using-ajax-in-codeigniter/

使用ajax

3 个答案: