我想与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>
上传的控制器只取自Codeigniter手册:
<?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
}
}
}
?>
我确定我在某个地方犯了一个小错误,任何人都可以看到我哪里出错了吗?提前谢谢!
答案 0 :(得分:2)
看起来你忘了在DOM准备好时初始化表单。
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#upload_form').ajaxForm(function() {
//rest of your code from the post
});
});