使用Codeigniter和jQuery Form Plugin上传Ajax文件

我试图在Codeigniter中使用jQuery Form Plugin。当我尝试上传时，页面被重定向（所以ajax不起作用）并且没有任何内容被上传。使用Codeigniter和jQuery Form Plugin上传Ajax文件

从哪里形式所处的看法是这样的：

<form id="upload_form" action="upload/do_upload" method="post" enctype="multipart/form-data"> 
    <input type="file" name="myfile"><br> 
    <input type="submit" value="Upload File to Server"> 
</form> 

<div class="progress"> 
     <div class="bar"></div > 
     <div class="percent">0%</div > 
</div> 
<div id="status"></div> 

<script> 
(function() { 

var bar = $('.bar'); 
var percent = $('.percent'); 
var status = $('#status'); 

$('#upload_form').ajaxForm({ 
    beforeSend: function() { 
     status.empty(); 
     var percentVal = '0%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    uploadProgress: function(event, position, total, percentComplete) { 
     var percentVal = percentComplete + '%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    complete: function(xhr) { 
    status.html(xhr.responseText); 
    } 
}); 

})(); 
</script>  
<script type="text/javascript" src="http://localhost/editor/assets/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="http://localhost/editor/assets/js/jquery.form.js"></script> 
</body>

而对于上传控制器刚刚从笨手动拍摄：

<?php 

class Upload extends CI_Controller { 

    function __construct() 
    { 
     parent::__construct(); 
     $this->load->helper(array('form', 'url')); 
    } 

    function do_upload() 
    { 
     $config['upload_path'] = './userdata/'; 
     $config['allowed_types'] = 'gif|jpg|png'; 
     $config['max_size'] = '100'; 
     $config['max_width'] = '1024'; 
     $config['max_height'] = '768'; 

     $this->load->library('upload', $config); 

     if (! $this->upload->do_upload()) 
     { 
      $error = array('error' => $this->upload->display_errors()); 

      //$this->load->view('upload_form', $error); TODO echo error 
     } 
     else 
     { 
      $data = array('upload_data' => $this->upload->data()); 

      //$this->load->view('upload_success', $data); TODO echo succes 
     } 
    } 
} 
?>

我敢肯定，我”我刚刚在某个地方犯了一个小错误，是否有人能看到我出错的地方？提前致谢！

来源

2013-03-15 Jamie Fearon

看起来您忘了在DOM准备就绪时初始化表单。

$(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function 
     $('#upload_form').ajaxForm(function() { 
      //rest of your code from the post 
     }); 
    });

来源

2013-03-17 04:47:25 ekims

使用Codeigniter和jQuery Form Plugin上传Ajax文件

回答

相关问题