php - CodeIgniter (および allowed_types) に関する問題

Question

お前らおはよう。

Plupload を CodeIgniter と一緒に使用しようとしています。Plupload の前に uploadify を試してみましたが、うまくいきました。uploadify の主な問題は、何を使用しても CSRF コードが送信されなかったことです。ただし、HTML5 アップローダでのみ適切に機能し、Flash アップローダでは機能しません。

ログを確認すると、動作していない理由がわかりました: CodeIgniter File Uploading Class の使用中です。

私は一括画像アップローダを行っているので、「jpg、gif、png、jpeg」を許可するように設定しましたが、間違った type_file をアップロードしているため、アップローダがアップロード請願を拒否することがわかりました (これはオクテット/ストリームであることがわかりました -え？）。

アップロードプロセスの後、画像を処理していました (サム、透かし、トリミングなどを生成する) ため、すべてのファイルタイプを許可するように設定すると、画像処理がまったく機能しなくなります。

私が考えていたのは、ファイルをアップロードし（オクテット/ストリームMIMEタイプを許可）、それを画像に変換し（imagecreatefromstringおよびfile_get_contents関数を使用）、個別に処理することでした。

他にアイデアがあれば教えてください

score 4 · Accepted Answer

先に進む前に、すべてのフラッシュアップローダを削除して、常に HTML5 のままで後方互換性があるhttps://github.com/blueimp/jQuery-File-Uploadを選択することをお勧めします。ほとんどの場合、アップロードバーは表示されませんが、Flash はなく、CodeIgniter に何らかの変更を加える必要はありません。

以下はあまり洗練されていません。実際、私のアプリケーションでは、次のバージョンから Flash アップロードのサポートを取りやめています。

Flash 経由で行われたアップロードはすべて、サーバーによってアプリケーション/オクテットストリームとして受信されます。ファイル /application/config/mime.php で、関心のあるファイルタイプに「application/octet-stream」を追加すると、これは問題になりません。ここに例を示します。ファイルの下部を見てください。

現在のところ、CSRF はそれほど問題ではありません。Flash には独自の Cookie があるため、完全に独立したブラウザのようなものです。CSRF を送信する前に、CodeIgniter がユーザーを識別するために使用するセッション ID を Flash に入力する必要があります。/application/config/config.php も変更する必要があります。

$config['sess_match_useragent'] = FALSE;

Uploadify3 を使用する場合 (これは Uploadify 2 と Plupload でも機能するはずです)、最初に /application/libraries/MY_Session.php を追加して、POST 経由でもセッションデータを送信できるようにする必要があります。

このファイルを使用してください: https://github.com/woxxy/FoOlSlide/blob/a7522d747fe406da18ce18ae9763f083b89eb91e/application/libraries/MY_Session.php

次に、コントローラーで、いつでもセッション ID を取得できるようにする必要があります。

function get_sess_id()
{
    $this->output->set_output(json_encode(array('session' => $this->session->get_js_session(), 'csrf' => $this->security->get_csrf_hash())));
}

アップロードコントローラーは、かなり標準的なアップロード機能である必要があります。アップロードで正しい名前を使用していることを確認してください (「userfile」)。

さて、最悪の部分: ビューファイルです。いくつかの詳細を削除することもできましたが、追加のデータがあれば、Uploadify3 であまり調べなくてもコーディングに役立つと思います。

<script type="text/javascript">
    function updateSession()
    {
        jQuery.post('<?php echo site_url('/admin/series/get_sess_id'); ?>', 
        function(result){

            jQuery('#file_upload_flash').uploadifySettings( 'postData', {
                'ci_sessionz' : result.session, 
                '<?php echo $this->security->get_csrf_token_name(); ?>' : result.csrf, 
                'chapter_id' : <?php echo $chapter->id; ?>
            }, false );
            setTimeout('updateSession()', 6000);
        }, 'json');
    }

    jQuery(document).ready(function() {
        jQuery('#file_upload_flash').uploadify({
            'swf'  : '<?php echo site_url(); ?>assets/uploadify/uploadify.swf',
            'uploader'    : '<?php echo site_url('/admin/series/upload/compressed_chapter'); ?>',
            'cancelImage' : '<?php echo site_url(); ?>assets/uploadify/uploadify-cancel.png',
            'checkExisting' : false,
            'preventCaching' : false,
            'multi' : true,
            'buttonText' : '<?php echo _('Use flash upload'); ?>',
            'width': 200,
            'auto'      : true,
            'requeueErrors' : true,
            'uploaderType'    : 'flash',
            'postData' : {},
            'onSWFReady'  : function() {
                updateSession();
            },
            'onUploadSuccess' : function(file, data, response) {
                var files = jQuery.parseJSON(data);
                var fu = jQuery('#fileupload').data('fileupload');
                fu._adjustMaxNumberOfFiles(-files.length);
                fu._renderDownload(files)
                .appendTo(jQuery('#fileupload .files'))
                .fadeIn(function () {
                    jQuery(this).show();
                });
            }   
        });
    });

</script>
<div id="file_upload_flash"></div>

さて、まだ十分な作業がなかったとしたら... Uploadify3 にはバグがあり、1 つまたは 2 つのコールバックをトリガーしません。

コードの修正版は次のとおりです。

あなたはそれを縮小したいかもしれません。

しかし、jQuery-File-Upload を使用したい場合はどうでしょうか?

あとは、コントローラーを少し調整するだけです。以下に例を示します (このコードのクリーニングも行いません。おそらくアップロードコントローラーが壊れてしまうからです)。

function upload()
{
    $info = array();

    // compatibility for flash uploader and browser not supporting multiple upload
    if (is_array($_FILES['Filedata']) && !is_array($_FILES['Filedata']['tmp_name']))
    {
        $_FILES['Filedata']['tmp_name'] = array($_FILES['Filedata']['tmp_name']);
        $_FILES['Filedata']['name'] = array($_FILES['Filedata']['name']);
    }

    for ($file = 0; $file < count($_FILES['Filedata']['tmp_name']); $file++)
    {
        $valid = explode('|', 'png|zip|rar|gif|jpg|jpeg');
        if (!in_array(strtolower(substr($_FILES['Filedata']['name'][$file], -3)), $valid))
            continue;

        if (!in_array(strtolower(substr($_FILES['Filedata']['name'][$file], -3)), array('zip', 'rar')))
            $pages = $this->files_model->page($_FILES['Filedata']['tmp_name'][$file], $_FILES['Filedata']['name'][$file], $this->input->post('chapter_id'));
        else
            $pages = $this->files_model->compressed_chapter($_FILES['Filedata']['tmp_name'][$file], $_FILES['Filedata']['name'][$file], $this->input->post('chapter_id'));

        foreach ($pages as $page)
        {
            $info[] = array(
                'name' => $page->filename,
                'size' => $page->size,
                'url' => $page->page_url(),
                'thumbnail_url' => $page->page_url(TRUE),
                'delete_url' => site_url("admin/series/delete/page"),
                'delete_data' => $page->id,
                'delete_type' => 'POST'
            );
        }
    }

    // return a json array
    echo json_encode($info);
    return true;
}


function get_file_objects()
{
    // Generate JSON File Output (Required by jQuery File Upload)
    header('Content-type: application/json');
    header('Pragma: no-cache');
    header('Cache-Control: private, no-cache');
    header('Content-Disposition: inline; filename="files.json"');

    $id = $this->input->post('id');
    $chapter = new Chapter($id);
    $pages = $chapter->get_pages();
    $info = array();
    foreach ($pages as $page)
    {
        $info[] = array(
            'name' => $page['filename'],
            'size' => intval($page['size']),
            'url' => $page['url'],
            'thumbnail_url' => $page['thumb_url'],
            'delete_url' => site_url("admin/series/delete/page"),
            'delete_data' => $page['id'],
            'delete_type' => 'POST'
        );
    }

    echo json_encode($info);
    return true;
}

さらにすごいビューコードを追加します (今回は jQuery アップロードからのほぼストック 1 つです)。

<div id="fileupload">
    <link href="<?php echo site_url(); ?>assets/jquery-file-upload/jquery-ui.css" rel="stylesheet" id="theme" />
    <link href="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.fileupload-ui.css" rel="stylesheet" />
    <?php echo form_open_multipart(""); ?>
    <div class="fileupload-buttonbar">
        <label class="fileinput-button">
            <span>Add files...</span>
            <input type="file" name="Filedata[]" multiple>
        </label>
        <button type="submit" class="start">Start upload</button>
        <button type="reset" class="cancel">Cancel upload</button>
        <button type="button" class="delete">Delete files</button>
    </div>
    <?php echo form_close(); ?>
    <div class="fileupload-content">
        <table class="files"></table>
        <div class="fileupload-progressbar"></div>
    </div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{if error}}
        <td class="error" colspan="2">Error:
            {{if error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else}}${error}
            {{/if}}
        </td>
        {{else}}
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
        {{/if}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{if error}} ui-state-error{{/if}}">
        {{if error}}
        <td></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        <td class="error" colspan="2">Error:
            {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
            {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
            {{else error === 3}}File was only partially uploaded
            {{else error === 4}}No File was uploaded
            {{else error === 5}}Missing a temporary folder
            {{else error === 6}}Failed to write file to disk
            {{else error === 7}}File upload stopped by extension
            {{else error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
            {{else error === 'emptyResult'}}Empty file upload result
            {{else}}${error}
            {{/if}}
        </td>
        {{else}}
        <td class="preview">
            {{if thumbnail_url}}
            <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
            {{/if}}
        </td>
        <td class="name">
            <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
        </td>
        <td class="size">${sizef}</td>
        <td colspan="2"></td>
        {{/if}}
        <td class="delete">
            <button data-type="${delete_type}" data-url="${delete_url}" data-id="${delete_data}">Delete</button>
        </td>
    </tr>
</script>
<script src="<?php echo site_url(); ?>assets/js/jquery-ui.js"></script>
<script src="<?php echo site_url(); ?>assets/js/jquery.tmpl.js"></script>
<script src="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.fileupload.js"></script>
<script src="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.fileupload-ui.js"></script>
<script src="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.iframe-transport.js"></script>

<script type="text/javascript">

    jQuery(function () {
        jQuery('#fileupload').fileupload({
            url: '<?php echo site_url('/admin/series/upload/compressed_chapter'); ?>',
            sequentialUploads: true,
            formData: [
                {
                    name: 'chapter_id',
                    value: <?php echo $chapter->id; ?>
                }
            ]
        });

        jQuery.post('<?php echo site_url('/admin/series/get_file_objects'); ?>', { id : <?php echo $chapter->id; ?> }, function (files) {
            var fu = jQuery('#fileupload').data('fileupload');
            fu._adjustMaxNumberOfFiles(-files.length);
            fu._renderDownload(files)
            .appendTo(jQuery('#fileupload .files'))
            .fadeIn(function () {
                jQuery(this).show();
            });

        });

        jQuery('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
            e.preventDefault();
            jQuery('<iframe style="display:none;"></iframe>')
            .prop('src', this.href)
            .appendTo('body');
        });

    });

</script>

php - CodeIgniter (および allowed_types) に関する問題

1 に答える 1

Related

Reference