我在使用Ajax和Codeigniter上传文件时遇到问题。我已经读过base64编码了我所需要的。但是此代码在较低版本的codeingiter和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,lastname: {
lettersAndNumbersAndSpacesOnly: true,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 VIEW
<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>