我在CodeIgniter中创建了一个用于上传图像的表单。
视图文件:
<form method="POST" action="<?php echo base_url().'promotions/add_item' ?>" enctype='multipart/form-data' class="form-horizontal" id="addItem">
<div class="form-group">
<label class="col-sm-3 control-label">Title</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="title" id="title" placeholder="Title">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Image</label>
<div class="col-sm-9">
<input type="file" name="pro_image">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<textarea class="form-control" rows="3" name="description" placeholder="Description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success" name="submit" id="submit">Submit</button>
</div>
</div>
</form>
Ajax代码:
<script>
$(function(){
$( "#addItem" ).submit(function( event ) {
var url = $(this).attr('action');
$.ajax({
url: url,
data: $("#addItem").serialize(),
type: $(this).attr('method')
}).done(function(data) {
$('#ret').html(data);
// window.location.reload();
$('#addItem')[0].reset();
});
event.preventDefault();
});
});
</script>
控制器文件:
<?php
$this->form_validation->set_rules('title','Title','required');
$this->form_validation->set_rules('description','Description','required');
var_dump($_FILES['pro_image']);
if ($this->form_validation->run() == FALSE) {
echo '<div class="alert alert-dismissable alert-danger"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><small>'. validation_errors().'</small></div>';
} else {
if ($_FILES['pro_image']['size'] > 0) {
$this->upload->initialize(array(
"upload_path" => './uploads/',
"overwrite" => FALSE,
"encrypt_name" => TRUE,
"remove_spaces" => TRUE,
"allowed_types" => "gif|jpg|png|jpeg",
));
if (!$this->upload->do_upload('pro_image')) {
echo 'Error :'. $this->upload->display_errors();
}
$data = $this->upload->data();
$img = $data['file_name'];
}
$title = $this->input->post('title');
$description = $this->input->post('description');
$this->promotions_model->add_item($title, $description,'uploads/'.$img);
}
每当我尝试上传图像时,它总是以null
的形式出现,但如果我注释掉event.preventDefault();
行,然后上传图像,那么它就可以正常工作。但是,验证和返回消息等其他功能无法正常工作。
谁能告诉我event.preventDefault()
有什么问题吗?
<script>
$(function(){
$( "#addItem" ).submit(function( event ) {
event.preventDefault();
var url = $(this).attr('action');
var data= new FormData($("#addItem")[0]);
$.ajax({
url: url,
contentType:false,
cache:false,
processData:false,
data: data,
type: 'POST' // POST/GET
success:function(data) {
$('#ret').html(data);
$('#addItem')[0].reset();
}
});
});
});
添加event.prventDefault();在起始sumbit listner 中