我尝试使用l框架CodeIgniter,jQuery ajax将文件上传到服务器,但是我提交的表单返回空图像字段,并且图片没有显示。
我感谢你的帮助。
这里是代码
控制器:
public function do_upload()
{
//Check if isset request AJAX
if( ! $this->input->is_ajax_request() ) {
show_404();
}
//Config upload files
$config = array(
'upload_path' => './assets/files/',
'allowed_types' => 'jpg|jpeg|png|gif',
'max_size' => '2048 ',
'overwrite' => TRUE,
'remove_spaces' => TRUE
);
//Load library
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('imagen') ) {
$error = array(
'respuesta' => FALSE,
'message' => $this->upload->display_errors()
);
echo json_encode( $error );
}
else{
$config = array(
'respuesta' => TRUE,
'message' => 'Completado!'
);
echo json_encode( $config );
}
}
查看:
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 col_right">
<div class="ctn">
<h3>Subir contenido al servidor</h3>
<form action="" method="POST" id="form_file" name="form_file" enctype="multipart/form-data">
<div class="form-group">
<input type="file" name="imagen" id="imagen">
</div>
<button type="button" id="btn_form" class="btn btn-primary">Subir imagen</button>
</form>
</div><!--End ctn-->
脚本Jquery Ajax:
$(function() {
$('#btn_form').on('click', function(event) {
//Serialize form
var form_serialize = $("#form_file").serialize();
alert(form_serialize);
$.ajax({
beforeSend: function () {
},
cache: false,
type: "POST",
dataType: "json",
url: "/file/do_upload/",
data: form_serialize + "&id=" + Math.random(),
success: function (response) {
if (response.respuesta == true) {
alert(response.message);
}
if (response.respuesta == false) {
alert(response.message);
}
},
error: function () {
alert('SYSTEM ERROR, TRY LATER AGAIN');
}
});
});
});
答案 0 :(得分:2)
你必须这样做
将按钮类型更改为submit
,,
更改jquery函数
$(function () {
$('#form_file').on('submit', function (e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
// cache: false,
type: "POST",
// dataType: "json",
processData: false,
contentType: false,
url: "/file/do_upload/",
data: formData,
success: function (response) {
if (response.respuesta == true) {
alert(response.message);
}
if (response.respuesta == false) {
alert(response.message);
}
},
error: function () {
alert('SYSTEM ERROR, TRY LATER AGAIN');
}
});
});
});