0

私は非同期で画像をアップロードすることに取り組んでおり、そのためにこの優れたチュートリアルを入手しました。私はそれをすべて読んで、必要のないモデルを削除して、必要に応じて作成しようとしましたが、それを実行してもエラーは発生せず、ファイルもアップロードされません。

コントローラーのアップロード機能にエコーを1つ入れましたが、 ajaxfileupload URLにフルパスを入れても、エコー文字列も取得できません。

これが私の見解です:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="<?php echo site_url()?>public/assets/js/ajaxfileupload.js"></script>
        <script>
            $(function() {
                $('#upload_file').submit(function(e) {
                    e.preventDefault();
                    $.ajaxFileUpload({
                        url          : 'upload2/upload_file',
                        secureuri    :  false,
                        fileElementId: 'userfile',
                        dataType     : 'json',
                        data         : {
                                           'title': $('#title').val()
                                       },
                        success : function (data, status)
                        {
                            if(data.status != 'error')
                            {
                                $('#files').html('<p>Reloading files...</p>');
                                refresh_files();
                                $('#title').val('');
                            }
                            alert(data.msg);
                        }
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
          <h1>Upload File</h1>
          <form method="post" action="" id="upload_file">
          <label for="title">Title</label>
          <input type="text" name="title" id="title" value="" />

          <label for="userfile">File</label>
          <input type="file" name="userfile" id="userfile" size="20" />

          <input type="submit" name="submit" id="submit" />
          </form>
          <h2>Files</h2>
          <div id="files"></div>
    </body>
</html>

そして、私のコントローラーはこれです:

<?php
    class Upload2 extends CI_Controller
    {
        public function __construct()
        {
            parent::__construct();

            $this->load->helper('url');
        }

        public function index()
        {
            $this->load->view('upload');
        }
        public function upload_file()
        {
            /* It's not even showing me this echo and the path is
               OK too, and even I put the whole path but no result. */

            echo "in upload_file";
            $status = "";
            $msg = "";
            $file_element_name = 'userfile';

            if (empty($_POST['title']))
            {
                $status = "error";
                $msg = "Please enter a title";
            }

            if ($status != "error")
            {
                $config['upload_path'] = './uploads/';
                $config['allowed_types'] = 'gif|jpg|png|doc|txt';
                $config['max_size']  = 1024 * 8;
                $config['encrypt_name'] = TRUE;

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

                if (!$this->upload->do_upload($file_element_name))
                {
                    $status = 'error';
                    $msg = $this->upload->display_errors('', '');
                }
                else
                {
                    $data = $this->upload->data();
                    $file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
                    if($file_id)
                    {
                        $status = "success";
                        $msg = "File successfully uploaded";
                    }
                    else
                    {
                        unlink($data['full_path']);
                        $status = "error";
                        $msg = "Something went wrong when saving the file, please try again.";
                    }
                }
                @unlink($_FILES[$file_element_name]);
            }
            echo json_encode(array('status' => $status, 'msg' => $msg));
        }
    }
?>
4

2 に答える 2

0

これは、プラグインや外部スクリプトなしで実行できます。ファイル アップロード要素、データを返す iFrame、および単純な Ajax スクリプトが必要です。

ファイルアップロード要素:

echo '<input type="file" name="prodImageUpload"
id="prodImageUpload" onchange="return ajaxFileUpload(this);"/>'

iFrame:

<iframe name="upload_iframe" id="upload_iframe" style="display:block;width:720px;"></iframe>

JavaScript スクリプト:

function ajaxFileUpload(upload_field)
{
    var re_text = /\.jpg|\.gif|\.jpeg|\.png/i;
    var filename = upload_field.value;
    var imagename = filename.replace("C:\\fakepath\\","");
    if (filename.search(re_text) == -1)
    {
        alert("File must be an image");
        upload_field.form.reset();
        return false;
    }
    upload_field.form.action = "addProductImage";
    upload_field.form.target = "upload_iframe";
    upload_field.form.submit();
    upload_field.form.action = "";
    upload_field.form.target = "";
    return true;
}

私のコントローラーにはカスタムアップロードがありますが、それは関係ありません。必要なことは、アップロードにコントロール名と最終パスを渡すことだけです。エラーがある場合はエラーを返します。iFrame に出力される場合はファイル名とサイズを返します。それは非常にシンプルで、うまく機能します。

于 2013-04-05T11:29:50.327 に答える