Codeigniter 图片上传使用 jquery 和 ajax 错误 [重复]
Posted
技术标签:
【中文标题】Codeigniter 图片上传使用 jquery 和 ajax 错误 [重复]【英文标题】：Codeigniter Image upload using jquery and ajax error [duplicate] 【发布时间】：2018-04-03 19:21:03 【问题描述】：我需要有关以下查询的指导。 我正在尝试上传文件或将文件移动到所需的目录，但它失败了。在表单上，除了 input['file'] 数据之外，所有其他字段数据都传递给控制器。 请通过以下代码。 查看： 使用 Bootstrap Modal 显示表单，只发布最少的代码
<form method="post" action="<?php //echo base_url().'admin/students/update_accomodation'; ?>" id="accform" enctype="multipart/form-data">
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>Students</label>
</div>
<div class="col-md-4">
<input type="text" name="student" value="" />
</div>
<div class="col-md-2">
<label>Room</label>
</div>
<div class="col-md-4">
<input type="text" name="room" value="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>Stay</label>
</div>
<div class="col-md-4">
<select name="stay" class="form-control" id="stay">
<option value="1">1 Month</option>
<option value="2">2 Month</option>
<option value="3">3 Month</option>
<option value="4">4 Month</option>
<option value="5">5 Month</option>
<option value="6">6 Month</option>
<option value="7">7 Month</option>
<option value="8">8 Month</option>
<option value="9">9 Month</option>
<option value="10">10 Month</option>
<option value="11">11 Month</option>
<option value="12">12 Month</option>
<option value="18">18 Month</option>
<option value="24">24 Month</option>
<option value="36">36 Month</option>
</select>
</div>
<div class="col-md-2">
<label>Upload PDF</label>
</div>
<div class="col-md-4">
<input type="file" name="file" id="file" class="btn btn-default btn-file" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary accomodation">Submit</button>
</div>
</form>
阿贾克斯 在同一页面和页脚中，jquery.js 文件正在完美加载，并且文件以外的字段数据也传递给控制器。
<script>
$(document).ready(function()
$(".accomodation").click(function(event)
event.preventDefault();
//var formData = $('#accform').serialize();
// var formData = new FormData($(this)[0]);
//var formData = $('#accform').formSerialize();
//console.log(formData);
//alert(JSON.stringify(formData));
$.ajax(
type: "POST",
url: "<?php echo site_url('admin/students/update_accomodation'); ?>",
data: $('#accform').serialize(),
//data: new FormData($("#accform")[0]),
processData: false,
success: function(res)
//var json = JSON.parse(res);
var parsed = res;
console.log(parsed);
if(parsed.status_code == 1)
alert('data inserted successfully');
window.location.href = "<?php echo site_url('admin/bookings'); ?>";
else
alert(parsed.status);
);
);
);
控制器
function update_accomodation()
//form input validation
$this->form_validation->set_rules('student_id','Student ID','trim|required');
$this->form_validation->set_rules('room_id','Room ID','trim|required');
$this->form_validation->set_rules('stay','stay','required');
if (empty($_FILES['file']['name'])) //check file is selected
$this->form_validation->set_rules('file','File','required');
if($this->form_validation->run() == FALSE) //form validation false
$data = array(
'status' => validation_errors(),
'status_code' => 2
);
echo json_encode($data);
else
//echo json_encode(array('data' => $_FILES['file']['name']));
//form validation true
if (0 < $_FILES['file']['error'])
$data = array(
'status' => 'File uploading error',
'status_code' => 3
);
echo json_encode($data);
else
$sourcePath = $_FILES['file']['tmp_name']; //filename="file"
$targetPath = "uploads/students/contracts/".rand(0,10000).$_FILES['file']['name']; //targetpath with random number as prefix
move_uploaded_file($sourcePath,$targetPath); //move file to target folder
$data1 = array( //take inputs
'stay' => $this->input->post('firstname'),
'id_upload' => $targetPath
);
$data = array(
'status' => 'upload successfully',
'status_code' => 1
);
echo json_encode($data);
我遇到了什么错误： 1) input['file'] 值没有被传递，只有 input['text'] 和其他值被传递。 2) 输入['file'] 的表单验证错误（因为文件值未通过而关闭）。
到目前为止我做了什么： 1）我尝试了多种类型来接受表单数据，我用ajax评论它。 2) 我试过 jquery.form.min.js 插件（链接：http://malsup.com/jquery/form/）。使用此插件后，输入 ['file'] 值可以得到接受（在控制台中跟踪）但未传递给控制器，得到错误未定义变量：文件。 3) ProcessData: false, contentType: false, 也使用。 4) enctype="multipart/form-data" 也包括在内。
最后一件事 上面的代码在另一个控制器上完美运行并在现有项目中查看，我复制了相同的代码，但它不适用于当前控制器。需要帮助，谢谢。
用户建议的更新 AJAX 代码：但它对我不起作用，因为 null 值会传递给控制器
<script>
$(document).ready(function()
$(".accomodation").click(function(e)
e.preventDefault();
var formData = new FormData(this);
$.ajax(
type: "POST",
url: "<?php echo site_url('admin/students/update_accomodation'); ?>",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(res)
console.log(res);
);
);
);
接受更正的答案 以下回答对我有用，非常感谢。
var form = $('#accform');
var formData = new FormData(form[0]);
相反
var formData = new FormData(this);
【问题讨论】：
@ADyson ：嗨，我已经检查了上面的解决方案，但它对我不起作用，在查看代码后有任何其他建议，因为上面的代码正在另一个控制器和视图上工作。谢谢。 为什么它不适合你呢？从赞成票的数量及其“受保护”状态来看，它显然适用于许多其他人。您是否有一些特殊的额外情况使您的问题与众不同？我看不到控制器和视图有什么影响，这只是改变了 URL - 你认为这对过程有什么影响？ 在您上面的代码中，您忘记设置 contentType 选项，这是最明显的错误，可能还有其他错误，但您应该从那里开始。 @ADyson ：我不知道为什么它对我不起作用，这就是我粘贴所有代码的原因，如果你能看到我提到我尝试了 processData: false 和其他东西，您认为是否有其他文件对 jquery 之类的代码有影响？ 【参考方案1】：.serialize() 不能接受使用 Jquery 和 Axaj 上传文件。
为了实现这个使用
$(document).ready(function (e)
$('.accomodation').on('submit',(function(e)
e.preventDefault();
var formData = new FormData(this);
$.ajax(
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data)
console.log("success");
console.log(data);
,
error: function(data)
console.log("error");
console.log(data);
);
));
));
【讨论】：
嗨，我之前也试过这个代码，没有用，现在所有字段都需要验证错误，这意味着所有表单字段数据都没有传递给控制器，请您对此提出建议，谢谢。 我也根据您的建议更新了问题，请检查是否有问题，谢谢。 您遇到了什么错误？ 在控制台中我看不到任何东西被传递，我的意思是调用正确地传递给控制器，但没有任何东西被传递 "fields":[] 使用->数据：formData，以上是关于Codeigniter 图片上传使用 jquery 和 ajax 错误 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
CodeIgniter 中的 Ajax 上传返回“您没有选择要上传的文件”