我是一名来自委内瑞拉的web开发人员，所以请原谅我的糟糕英语。
我一直在寻找一种使用ajax上传文件的方法，我发现了许多ajax上传插件，有些非常困难和令人困惑的集成到CodeIgniter(我用来开发我的web项目)，直到我发现简单的ajax上传程序，我强烈推荐:https://github.com/LPology/Simple-Ajax-Uploader
所以，我终于可以用ajax上传我的文件，仍然使用codeigniter的上传库。唯一的问题是，我想发送到服务器超过正在上传的文件，我想发送该文件的标题，但我不知道如何用这个插件做到这一点，我看不到任何明确的信息，在文档中。我只知道你可以在Uploader实例中使用"data"参数，这样你就可以发送比文件更多的数据，但它似乎不起作用，因为我的表单中标题输入的值没有被保存在我的数据库中。
这是我的js代码:
function escapeTags(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
jQuery(document).ready(function ($) {
var btn = document.getElementById('uploadBtn'),
progressBar = document.getElementById('progressBar'),
progressOuter = document.getElementById('progressOuter');
var uploader = new ss.SimpleUpload({
button: btn,
url: 'index.php/file/upload/do_upload',
name: 'userfile',
data: {'file_title': document.getElementById('file_title').value},
multipart: true,
method: "POST",
hoverClass: 'hover',
focusClass: 'focus',
responseType: 'JSON',
debug: true,
autoSubmit: false,
startXHR: function () {
progressOuter.style.display = 'block'; // make progress bar visible
this.setProgressBar(progressBar);
},
onSubmit: function () {
$("#upload").button("loading");
},
onComplete: function (filename, response) {
progressOuter.style.display = 'none'; // hide progress bar when upload is completed
$("#upload").button("reset");
if (!response) {
console.log(filename + ' Unable to upload file ' + response);
return;
}
if (response.success === true) {
alert('<strong>' + escapeTags(filename) + '</strong>' + ' successfully uploaded.');
} else {
if (response.msg) {
console.log(escapeTags(response.msg));
} else {
console.log('An error occurred and the upload failed.');
}
}
},
onError: function (response) {
progressOuter.style.display = 'none';
alert('Unable to upload file ' + response);
}
});
$("#upload").click(function(){
uploader.submit();
});
});
这是我的表格
<div class="modal" id="modalUploadFile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h1 class="modal-title" id="myModalLabel">
<div class="well">Sube tu imagen</div>
</h1>
</div>
<div class="modal-body">
<h5><small>Sube tus memes, pega imágenes a través de URL, los formatos aceptados son GIF/JPG/PNG (Máximo peso: 3MB)</small></h5>
<form id="upload_file">
<div class="form-group">
<div class="well">
<input type="file" name="userfile" id="uploadBtn"/>
</div>
</div>
<div class="form-group">
<label for="file_title" class="control-label">Título</label>
<textarea name="file_title" id="file_title" rows="4" class="form-control"></textarea>
</div>
<div id="progressOuter" class="progress progress-striped active" style="display:none;">
<div id="progressBar" class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-loading-text="Subiendo..." id="upload">Subir
<span class="glyphicon glyphicon-upload"></span></button>
</div>
</div>
</div>
这是我的php代码
public function do_upload()
{
$status = '';
$msg = '';
$config['upload_path'] = './images/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '3000';
$config['max_width'] = '2024';
$config['max_height'] = '2008';
$this->load->library('upload');
$this->upload->initialize($config);
if (!$this->upload->do_upload()) {
$status = ['success' => FALSE, 'msg' => $this->upload->display_errors()];
echo json_encode($status);
} else {
$file_info = $this->upload->data();
$this->_create_thumbnail($file_info['file_name']);
$data = ['upload_data' => $this->upload->data()];
$title = $this->input->post('file_title');
$image = $file_info['file_name'];
$upload = $this->upload_model->upload($title, $image);
if ($upload) {
$status = ['success' => TRUE, 'msg' => 'Imagen subida con exito'];
echo json_encode($status);
}
}
}
public function _create_thumbnail($filename)
{
$config['image_library'] = 'gd2';
$config['source_image'] = 'images/' . $filename;
$config['create_thumb'] = TRUE;
$config['maintain_ratio'] = TRUE;
$config['new_image'] = 'images/thumbs/';
$config['width'] = 30;
$config['height'] = 30;
$this->load->library('image_lib', $config);
$this->image_lib->resize();
}
请帮助! !
当页面加载时，您正在创建上传程序。此时，输入字段"file_title"中没有数据。
data: {'file_title': document.getElementById('file_title').value}
尝试在点击上传按钮时调用代码块
$('#upload ').on('click', function () {
// add your validation here
....
var uploader = new ss.SimpleUpload({
button: btn,
url: 'index.php/file/upload/do_upload',
name: 'userfile',
data: {'file_title': document.getElementById('file_title').value},
......
});
别忘了把所有的东西都包在document里。准备好，或者快捷方式。
$(function(){
....
// now you can use jquery to get values
data: {'file_title': $('#file_title').val()},
});