0

私は現在、CodeIgniter を使用して学校のプロジェクト用にいくつかのフォームを開発しています。

アイデアは、画像をアップロードするフォームがあるということです。Ajax で動的に実行しようとしていますが、まったく機能していないようです。私はphpで非動的バージョンを試しましたが、完全に機能し、画像はフォルダーにあり、問題はありません。

プラグインを 5 つか 6 つ試してみましたが、結果はありませんでした。間違いなく私のせいですが、どこでミスをしたのかわかりません。

<---コントローラ--->

if($result = $this->images_model->add_bdd())
{   
    $data['uploaded'] = $result;
    $data['message_upload'] = 'Image uploader avec succès.';                            
    $this->template->set_title('Upload successful');
    $this->template->view('add_places',$data);
}
else
{   
    $this->template->set_title('Upload failed');
    $this->template->view('add_places');
}

<--モデル-->

function add_bdd()
{
    $config = array(
                'allowed_types' => 'jpg|jpeg|tiff',
                'upload_path' => $this->gallery_path,
                'max_size' => 2000,
                'remove_spaces' => TRUE,
                'overwrite' => FALSE
            );

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

        $data_img = $this->upload->data();
        $exif = $this->exif_extractor->coords($data_img['full_path']);
        $data = array(
                'titre' => 'titlecontent',
                'url' => base_url('images/'.$data_img['file_name']),
                'url_min' => base_url('images/'.$data_img['raw_name'].'_min'.$data_img['file_ext']),
                'alt' => 'cover_contentName',
                'id_users' => $this->session->userdata('id'),
                'date_upload' => date('Y-m-d H:m'),
                'date_modified' => date('Y-m-d H:m'),
                'lat' => $exif[0],
                'long' => $exif[1],
                );
        $this->db->insert('pictures',$data);
        return $exif;
    }
    else
    {
        return false;
    }
}

<--表示-->

<form action="http://localhost:8888/project/images/add" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="userfile" value="Image de couverture"  />
<button name="upload" type="button" id="upload">Upload</button>
<input type="submit" name="submit" value="Publish Place"  />
</form>

画像を動的にアップロードし、スクリプトに私の画像をパスやその他のデータとともに送り返すための jQuery プラグインを誰かに提供できますか?

jQuery 用に作成したすべてのコードのように貼り付けることはできませんが、それについて本当に助けが必要です。私がそれに乗っているのは2日です！

ご協力いただきありがとうございます。

4

3 に答える 3

0

助けてくれてありがとう、私はスクリプトについてのダイナミクスを変更したので、今では私がしなければならないことと完全に連携しています。

私のアップロードシステムのスクリプトがあります：

<-- VIEW (アップロード画像)-->

<div id="container">
<div id="filelist"></div>
<a href="http://localhost:8888/myproject/#" id="userfile" name="userfile">[Select files]      </a>    
<a href="http://localhost:8888/myproject/images/index#" id="uploadfiles">[Upload files]</a
</div>

<-- コントローラ -->

function index(){
    if($this->_access())
    {
        $this->template->add_include('js/jquery.js')
                       ->add_include('js/browserplus.js')
                       ->add_include('js/plugins/plupload/plupload.full.js')
                       ->add_include('js/imgfunc.js');
        $this->template->view('upload_img');
    }
    else
    {
        redirect(site_url());
    }
}

function upload_image_spot()
{
    if($query = $this->images_model->upload_image_spot())
    {
        echo json_encode($query);
    }
    else
    {
        echo $this->upload->display_errors('', '');
    }
}

<-- モデル -->

   function upload_image_spot()
{
    $config['upload_path'] = realpath(APPPATH. '../images/spots');
    $config['allowed_types'] = 'jpg|jpeg|tiff|png';
    $config['max_size'] = 3062;
    $config['encrypt_name'] = TRUE;
    $this->load->library('upload', $config);
    if($this->upload->do_upload('file')) 
    // file means the file send to the website for upload, this is the name of field for Plupload script
    {
    $data_img = $this->upload->data();
    $copies = array(
            array('dir' => 'images/spots/large/', 'x' => 1000, 'y' => 600),
            array('dir' => 'images/spots/thumb/', 'x' => 100, 'y' => 60)
    );

    $this->copies($data_img,$copies);

    return 'whatever'; // Not real data, I don't wanna post them here
    }
}

<-- JS スクリプト -->

まず、次のものが含まれます。

-jQuery

-ブラウザプラス

-プルロード

( Plupload スクリプト)

このスクリプトを空のファイルに追加します。

var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'userfile',
    container : 'container',
    max_file_size : '3mb',
    url : 'yourUploadFunctionCI',
    flash_swf_url : 'plugins/plupload/js/plupload.flash.swf',
    silverlight_xap_url : 'plugins/plupload/js/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,jpeg,JPG,JPEG,tiff,png"},
    ]
});

uploader.bind('Init', function(up, params) {
});

$('#uploadfiles').click(function(e) {
    uploader.start();
    e.preventDefault();
});

uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        $('#filelist').html("");
        $('#filelist').append(
            '<div id="' + file.id + '">' +
            file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
        '</div>');
    });

    up.refresh();
});

uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id + " b").html(file.percent + "%");
});

uploader.bind('Error', function(up, err, msg,file) {
    $('#filelist').append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );
    console.log(msg,up,err);
    up.refresh();
});

uploader.bind('FileUploaded', function(up, file,response) {
    $('#' + file.id + " b").html("100%");
    var data = jQuery.parseJSON(msg.response);
    console.log(data);
});

独自のカスタマイズを行うだけです。php ファイルからすべてのスクリプトをコントローラーにコピー/貼り付けするなど、ウェブサイトで見られるような追加のスクリプトは必要ありません。do_upload 内に「ファイル」を追加するだけで、すべてが正常に機能します。

良い一日をお過ごしください。お役に立てば幸いです。

サイモン

于 2012-05-27T21:50:42.123 に答える
0

Javascript コードがなければ、誰もあなたのためにできることはほとんどありません。

コードをよりよく理解し、デバッグし、調整できるように、Nettuts+ のこのチュートリアルをチェックしてください。

また、現在のプロジェクトのニーズにより適したものをコーディングする方が簡単なので、jQuery プラグインはほとんど使用しないため、お勧めできません。

于 2012-05-23T13:20:49.097 に答える
0

add_bdd() 関数は false を返しますか?

私は CodeIgnitor を使用してこれを行いましたが、通常、指定したフィルターがファイルをアップロードしない理由であることがわかりました。falseのセクションにさらにコードを追加if ($this->upload->do_upload())し、次を使用してデバッグ コードを出力する必要があります。

echo $this->upload->display_errors();

詳細については、こちらを参照してください: http://codeigniter.com/user_guide/libraries/file_uploading.html

これを AJAX 経由で呼び出す場合は、エコーされたデバッグ結果を呼び出しページの HTML 要素に出力するなど、デバッグ結果を表示する手段が必要になることに注意してください。Firebug などのツールを使用して iformation を印刷することもできます。

于 2012-05-22T20:37:39.213 に答える