这是我的angularjs代码: 在控制器中:
var formdata = new FormData();
$scope.getTheFiles = function ($files) {
console.log($files);
angular.forEach($files, function (value, key) {
formdata.append(key, value);
});
};
// NOW UPLOAD THE FILES.
$scope.uploadFiles = function () {
var request = {
method: 'POST',
url: 'server/appointments/uploadedFiles',
data: formdata,
headers: {
'X-API-KEY': $rootScope.currentUser.key,
'Content-Type': undefined
}
};
// SEND THE FILES.
$http(request)
.success(function (d) {
console.log(d);
})
.error(function (e) {
console.log(e);
});
}
}
并在指令中:
.directive('ngFiles', ['$parse', function ($parse) {
function fn_link(scope, element, attrs) {
var onChange = $parse(attrs.ngFiles);
element.on('change', function (event) {
onChange(scope, { $files: event.target.files });
});
};
return {
link: fn_link
}
} ]);
对于API我使用codeigniter:
function uploadedFiles_POST()
{
function do_upload()
{
if ($this->input->post('Upload')) {
$config['upload_path'] = './Appointments/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '1024';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$this->load->library('upload', $config);
if (!$this->upload->do_upload()) {
$error = array('error' => $this->upload->display_errors());
} else {
$data = $this->upload->data();
$file = array(
'img_name' => $data['raw_name'],
'ext' => $data['file_ext'],
'upload_date' => time()
);
$this->appointments_model->add_image($file);
$data = array('upload_data' => $this->upload->data());
}
} else {
redirect(site_url('upload'));
}
}
}
在codeigniter模型中:
function add_image($data)
{
$this->db->where('id', '395');
return $this->db->update('user_appoint', $data);
}
我的问题是浏览器检测开发人员工具中的文件名,但文件无法上传到数据库。它显示500状态。
答案 0 :(得分:1)
对于这个使用角度文件上传从这里下载:
https://github.com/nervgh/angular-file-upload
使用此控制器:
app.controller('FileUploadCtrl', ['$scope', 'FileUploader', function($scope, FileUploader)
{
var uploader = $scope.uploader = new FileUploader({
url: 'Your Api path',
autoUpload: true,
});
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
$('.alert').addClass('hide');
if(response.error) {
$('.alert-danger').html(response.message).removeClass('hide');
} else {
$scope.user.newimg = response.newfilename;
}
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
查看应该是这样的:
<div ng-controller="FileUploadCtrl">
<div class="form-group">
<label class="control-label">Image</label>
<input type="file" nv-file-select="" uploader="uploader" />
</div>
</div>
你的Api方法应该是这样的:
public function user_image_upload()
{
$json = array();
$config['upload_path'] = 'assets/avatar/';
$config['allowed_types'] = 'gif|jpg|png';
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);
$this->upload->initialize($config);
if ( ! $this->upload->do_upload('file') )
{
$json = array('error' => true, 'message' => $this->upload->display_errors());
}
else
{
$upload_details = $this->upload->data();
$json = array('success' => true, 'message' => 'File transfer completed', 'newfilename' => $upload_details['file_name']);
}
$this->json($json);
}
希望它会对你有所帮助。