Codeigniter 文件上传中的 JSON 问题答案

【问题标题】：JSON issue in Codeigniter File UploadCodeigniter 文件上传中的 JSON 问题
【发布时间】：2015-12-11 14:53:45
【问题描述】：

我正在查看文件上传表单的以下代码：

<form method="post" action="<?=site_url('api/do_upload')?>" enctype="multipart/form-data" id="upload_photo" />
                    <input type="file" name="userfile" size="20" class="btn btn-primary" /><br />
                    <input type="submit" value="upload" class="btn btn-warning btn-xs" />
                </form>

JS中的事件捕获：

$("#upload_photo").submit(function(evt) {
             evt.preventDefault();

            var url = $(this).attr('action');
            var postData = $(this).serialize();

            $.post(url, postData, function(o){
               if(o.result == 1) {
                   Display.success(o.output);
               } 
               else
               {
                   Display.error(o.error);
               }
            },'json');

         });

模型，我正在处理文件上传：

public function do_upload()
    {
        $this->_require_login();
        $this->output->set_content_type('application_json');

        $config['upload_path'] = 'C:\xampp2\htdocs\kedb\public\img\profile';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '10000';
        $config['max_width']  = '1024';
        $config['max_height']  = '768';
        $config['file_name'] = $this->session->userdata('user_id');
        $config['overwrite'] = TRUE;

        $this->load->library('upload', $config);

        if ( ! $this->upload->do_upload('userfile'))
        {
            $this->output->set_output(json_encode([
                    'result' => '0',
                    'output' => $this->upload->display_errors()
            ]));
        }
        else
        {
            $this->output->set_output(json_encode([
                    'result' => '1',
                    'output' => 'File Uploaded Successfully'
            ]));
            return false;
            //$data = array('upload_data' => $this->upload->data());
            //$this->load->view('upload_success', $data);
        }
    }

当我点击“上传”按钮时，出现以下错误：

{"result":"0","output":"<p>You did not select a file to upload.<\/p>"}

如果我删除 <form> 标签中的 id="upload_photo" ，它就可以工作了。仅当我在<form> 中添加 id 属性时才会出错。

我可能错过了什么或做错了什么。有人可以请我出去吗？

【问题讨论】：

标签： json codeigniter file-upload

【解决方案1】：

我通过在 config/mimes.php 文件的 json 类型中添加“text/plain”解决了同样的问题。所以现在这一行看起来像这样（它是我使用的 CI 版本文件中的第 117 行）：

'json' => 数组('application/json', 'text/json', 'text/plain'),

【讨论】：

【解决方案2】：

.serialize() 返回一个包含所有表单值的字符串。您无法使用.serialize() 上传文件。

如果您想通过 AJAX 上传，则需要创建一个 FormData 对象。您还需要使用$.ajax，以便调整一些设置。

var url = $(this).attr('action');
var postData = new FormData(this);

$.ajax({
    url: url,
    data: postData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(o){
        if(o.result == 1) {
            Display.success(o.output);
        } 
        else{
            Display.error(o.error);
        }
    }
});

【讨论】：

【解决方案3】：

我使用 codeigniter 的时间不长，但我认为这可能是因为您实现表单的方式。使用 form_open();

https://ellislab.com/codeigniter/user-guide/helpers/form_helper.html

要添加属性，请执行此操作

<?echo form_open('api/do_upload',array('id'=>'upload_photo'));?>

我可以看到的第二个错误是在您的 AJAX 中。

$(this).serialize();

你想像这样将一个对象传递给 postdata

data:{file:$(this).children('input[type="file"]').val()},

还有！使用 AJAX 发送文件时需要使用 formData();

formData=new formData();
$file=$(this).children('input[type="file"]');
formData.append('file',$file.files[0],$file.files[0].name);

如果我有什么问题：

http://blog.teamtreehouse.com/uploading-files-ajax

【讨论】：