从 UploadiFive 向 Codeigniter 控制器发送数据
Sending data to Codeigniter controller from UploadiFive
我正在尝试使用 UploadiFive
上传一些文件,并在上传文件时将有关它们的信息添加到数据库中。用户在表单中输入一些详细信息,然后单击上传,此时文件被上传,表单中的信息以相应的文件名添加到数据库中。
我可以上传文件,但每次文件上传完成时我都需要 post 表格。它正在 posting 表单,但我正在努力从上传的文件中获取文件名。代码如下:
HTML 页面:
<?php echo form_open_multipart('upload/do_upload', 'id="upload_form" name="upload_form"');?>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
<div id="target"></div>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : true,
'checkScript' : '<? echo base_url();?>uploadify/check-exists.php',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'onError' : function(errorType) {
alert('The error was: ' + errorType);
},
'uploadScript' : '<? echo base_url();?>uploadify/uploadifive.php',
'onUploadComplete' : function (event, queueID, fileObj, response, data, file) {
//Post response back to controller
$.post('<?php echo site_url('upload/do_upload');?>', {
field1: $("#field1").val(),
field2: $("#field2").val(),
field3: $("#field3").val(),
field4: $("#field4").val(),
checkbox1: $("#checkbox1:checked").val(),
field5: $("#field5").val(),
filearray : response},
function(info){
$("#target").append(info); //Add response returned by controller
});
}
});
});
</script>
然后我的控制器:
//Decode JSON returned
$file = $this->input->post('filearray');
$json_decoded = json_decode($file);
// Get the image filename & full filename with path
$image_file = $json_decoded->{'file_name'};
$path = "assets/photos/highres/".$image_file;
echo "IMAGE FILE NAME: " . $image_file; die;
出于调试目的,我只是回显了 $image_file
。
它似乎正在提交除了来自 uploadifive.php
脚本的响应之外的所有内容。当我使用 Firebug 时,我可以看到我确实得到了一个响应,它看起来是正确的,但是响应 (filearray
) 没有被 post 编辑到要解码的表单。
关于为什么我无法从响应中得到 filename
的任何想法?
TL;DR
在onUploadComplete:function(event,data){}
中使用event.name
如果你真的需要服务器的响应,那么你可能想使用 data
(不幸的是,我无法测试它,但文档不会说谎,对吗?)。
详情
onUploadComplete
的文档告诉我们以下内容:
onUploadComplete
Input Type
function
Overridable
N/A
Triggered once for each file upload that completes.
Arguments
- file
The file object that was uploaded
- data
The data returned from the server-side upload script (echoed in uploadifive.php)
Demo
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onUploadComplete' : function(file, data) {
alert('The file ' + file.name + ' uploaded successfully.');
}
});
});
这与您的代码中的完全不同:
'onUploadComplete' : function (event, queueID, fileObj, response, data, file) {...}
我无法测试 UploadiFive
,但用 Uploadify
进行了快速检查:
'onUploadComplete' : function(event) {
console.log(JSON.stringify(event,null,4));
}
返回此输出:
{
"size": 34405,
"post": {},
"modificationdate": "2015-09-21T02:24:51.597Z",
"name": "Tire-wheel-advisor1.jpg",
"creationdate": "2015-09-21T02:24:51.539Z",
"id": "SWFUpload_0_0",
"type": ".jpg",
"filestatus": -4,
"index": 0
}
我正在尝试使用 UploadiFive
上传一些文件,并在上传文件时将有关它们的信息添加到数据库中。用户在表单中输入一些详细信息,然后单击上传,此时文件被上传,表单中的信息以相应的文件名添加到数据库中。
我可以上传文件,但每次文件上传完成时我都需要 post 表格。它正在 posting 表单,但我正在努力从上传的文件中获取文件名。代码如下:
HTML 页面:
<?php echo form_open_multipart('upload/do_upload', 'id="upload_form" name="upload_form"');?>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
<div id="target"></div>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : true,
'checkScript' : '<? echo base_url();?>uploadify/check-exists.php',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'onError' : function(errorType) {
alert('The error was: ' + errorType);
},
'uploadScript' : '<? echo base_url();?>uploadify/uploadifive.php',
'onUploadComplete' : function (event, queueID, fileObj, response, data, file) {
//Post response back to controller
$.post('<?php echo site_url('upload/do_upload');?>', {
field1: $("#field1").val(),
field2: $("#field2").val(),
field3: $("#field3").val(),
field4: $("#field4").val(),
checkbox1: $("#checkbox1:checked").val(),
field5: $("#field5").val(),
filearray : response},
function(info){
$("#target").append(info); //Add response returned by controller
});
}
});
});
</script>
然后我的控制器:
//Decode JSON returned
$file = $this->input->post('filearray');
$json_decoded = json_decode($file);
// Get the image filename & full filename with path
$image_file = $json_decoded->{'file_name'};
$path = "assets/photos/highres/".$image_file;
echo "IMAGE FILE NAME: " . $image_file; die;
出于调试目的,我只是回显了 $image_file
。
它似乎正在提交除了来自 uploadifive.php
脚本的响应之外的所有内容。当我使用 Firebug 时,我可以看到我确实得到了一个响应,它看起来是正确的,但是响应 (filearray
) 没有被 post 编辑到要解码的表单。
关于为什么我无法从响应中得到 filename
的任何想法?
TL;DR
在onUploadComplete:function(event,data){}
event.name
如果你真的需要服务器的响应,那么你可能想使用 data
(不幸的是,我无法测试它,但文档不会说谎,对吗?)。
详情
onUploadComplete
的文档告诉我们以下内容:
onUploadComplete
Input Type
functionOverridable
N/ATriggered once for each file upload that completes. Arguments
- file
The file object that was uploaded- data
The data returned from the server-side upload script (echoed in uploadifive.php)Demo
$(function() { $('#file_upload').uploadifive({ 'uploadScript' : '/uploadifive.php' 'onUploadComplete' : function(file, data) { alert('The file ' + file.name + ' uploaded successfully.'); } }); });
这与您的代码中的完全不同:
'onUploadComplete' : function (event, queueID, fileObj, response, data, file) {...}
我无法测试 UploadiFive
,但用 Uploadify
进行了快速检查:
'onUploadComplete' : function(event) {
console.log(JSON.stringify(event,null,4));
}
返回此输出:
{
"size": 34405,
"post": {},
"modificationdate": "2015-09-21T02:24:51.597Z",
"name": "Tire-wheel-advisor1.jpg",
"creationdate": "2015-09-21T02:24:51.539Z",
"id": "SWFUpload_0_0",
"type": ".jpg",
"filestatus": -4,
"index": 0
}