使用ajax代码点火器上传文件始终为NULL

Question

我在使用Ajax和Codeigniter上传文件时遇到问题。我读过base64编码我需要的东西。但这段代码适用于较低版本的codeingter和PHP。我不知道问题是从哪里来的。上传文件时，我总是会出现一个错误"您没有选择要上传的文件"。

问题出在哪里？

提前谢谢。

控制器

public function do_upload()
{
$this->load->library('upload'); //call codeigniter upload library
//upload configurations
$base_path = 'uploads';
$config['upload_path']  = $base_path;
$config['allowed_types']= 'jpg|jpeg|png|bitmap|pdf|docx|doc';
$config['max_size']     = 0;
$this->upload->initialize($config);
if(!$this->upload->do_upload('user_pic')){
//if upload does not meet the configuration settings throw error.
$error = array('error' => $this->upload->display_errors());
echo '<pre>';
print_r($error);
echo '</pre>';
}else {
//proceed upload
$data = array(
'uploaded_data' => $this->upload->data()
);
$file_name  = $data['uploaded_data']['file_name'];
}
}

Ajax

$(function() {
$("#edit_prof").validate({
rules: {
firstname: {
lettersAndNumbersAndSpacesOnly: true,
maxlength: 50,
required: true
},
middlename: {
lettersAndNumbersAndSpacesOnly: true,
maxlength: 50,
required: true
},
lastname: {
lettersAndNumbersAndSpacesOnly: true,
maxlength: 50,
required: true,
},
user_pic: {
maxlength: 250,
extension: 'gif|jpg|jpeg|png'
}
},
highlight: function(element) {
var id_attr = "#" + $( element ).attr("id") + "1";
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
$(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');         
},
unhighlight: function(element) {
var id_attr = "#" + $( element ).attr("id") + "1";
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.length) {
error.insertAfter(element);
} else {
error.insertAfter(element);
}
},
submitHandler: function() {
var url = "<?php echo site_url('user/user_profile/do_upload')?>";
var form = $('#form')[0];
var formData = new FormData(form);
console.log($('#user_pic').val());
// ajax adding data to database
$.ajax({
url: url,
data: formData,
type: "POST", //ADDED THIS LINE
dataType: "JSON",
// THIS MUST BE DONE FOR FILE UPLOADING
contentType: false,
processData: false,
// ... Other options like success and etc
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{
$('#edit_prof').validate('resetForm', true);
$( "#message" ).text('Your Profile has been changed. Please re-login to update your profile details.').show();
setTimeout(function(){
$( "#message" ).fadeOut();
}, 1500);
}
},
error: function (jqXHR, textStatus, errorThrown)
{
//alert('Error adding / update data');
$( "#message" ).append("<div class='alert alert-danger'><strong>Something went wrong! Please refresh the page.</strong></div>");
setTimeout(function(){
$('#message').slideUp('slow').fadeOut(function() {
});
}, 1500);
}
});
return false;
}
});
});

HTML视图

<form enctype="multipart/form-data" id="edit_prof" class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="cpassword" class="col-sm-4 control-label">Change Photo</label>
<div class="col-sm-5">
<input type="file" id="user_pic" name="user_pic" class="form-control input-file" placeholder="Picture" style="font-size:15px;">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<input type="hidden" name="user_profile" id="user_profile" value="<?php //echo $profile_pic; ?>" /> 
<button type="submit" class="btn btn-primary"> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes </button>
</div>
</div>
</fieldset>
</form>

Answer 1

我最近也遇到过类似的情况。我希望我的回答有点帮助

---

步骤1。Check You Jquery版本

• 我的案例：1.x.x也不工作(POST/GET为NULL(

• plz最新版本下载

---

步骤2。测试"$_FILE">

//HTML

<form enctype="multipart/form-data" id="edit_prof" class="form-horizontal">
<div>
<img id="Thumbnail" src="noimg.jpg">
</div>
<fieldset>
<div class="form-group">
<label for="cpassword" class="col-sm-4 control-label">Change Photo</label>
<div class="col-sm-5">
<input type="file" id="user_pic" name="user_pic" class="form-control input-file" placeholder="Picture" style="font-size:15px;">
<input type="text" id="user_memo" name="user_memo" class="form-control input-file" style="font-size:15px;">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<input type="hidden" name="user_profile" id="user_profile" value="<?php //echo $profile_pic; ?>"/>
<span onclick="formSubmit();" class="btn btn-primary"><i class="glyphicon glyphicon-ok-sign"></i> Save Changes</span>
</div>
</div>
</fieldset>
</form>

//JS-

<script>
function formSubmit () {
var form = $("#edit_prof")[0];
var formData = new FormData (form);
var FileInfo = $ ("input[name='user_pic']")[0].files[0];
formData.append ("user_memo", $ ('input[name="user_memo"]').val ());
formData.append ("file", FileInfo);
$.ajax ({
url: "Codeigniter URL"
, type: "POST"
, dataType: 'text'
, cache: false
, processData: false
, contentType: false
, data: formData
, beforeSend: function ()
{
$('input[name="user_pic"]').hide();
$('input[name="user_memo"]').hide();
}
, success: function (getData)
{
console.log(saveImgUrl);
if(saveImgUrl.length > 0)
{
$('#Thumbnail').attr('src', saveImgUrl);
}
$('input[name="user_pic"]').show();
$('input[name="user_memo"]').show();
}
});
}
</script>

//PHP(代码点火器3.x(

public function imgUpload()
{
$POST_ALL = $this->input->post();
$FILE_ALL = $_FILES;
// Image Process - Start
// Image Process - End
// echo var_dump($POST_ALL);
echo var_dump($FILE_ALL);
}