2012-01-23 10 views
0

私はcodeigniterとJqueryを使用しています。私はviewスクリプトにアップロードフォームを持っています。アップロードフォームは、いくつかのテキスト入力とファイル入力で構成されています。誰かがそのメニューリンクをクリックするとフォームがポップされます(私はJquery Modalフォームでそれを行いました)。フォーム送信時にajax呼び出しをシミュレートする方法はありますか?ユーザーが送信をクリックすると、ファイルはサーバー上のディレクトリに送信され、その情報はデータベースに保存されます。ここファイルをiframe経由でいくつかのデータとともにアップロードすることはできますか?

は私のコードです: VIEW:

<div id="right_column" class="grid_7 omega"> 
     <section id="music_features"> 
      <header> 
       <hgroup> 
        <h1>Your Playlist</h1> 
        <p>Up to only 3 files allowed for beta version</p> 
       </hgroup> 
      </header> 
      <p id="song_upload_menu"><?php echo anchor('#', 'Upload Song');?></p> 
      <article id="song_upload_form"> 
       <div id="song_upload_info"> 
        <?php echo $this->session->flashdata('info'); ?> 
       </div> 
       <?php echo form_open_multipart('profile/do_upload_song');?> 
       <input type="hidden" id="user_id" name="user_id" value="<?php echo $user->id_str;?>" /> 
       <label for="title">Song Title</label> 
       <input type="text" name="title" id="title" size="30" value="<?php echo set_value('title'); ?>"/><br /> 
       <label for="album"> Album Title </label> 
       <input type="text" name="album" id="album" size="30" value="<?php echo set_value('album'); ?>"/><br /> 
       <label for="artist">Artist</label> 
       <input type="text" name="artist" id="artist" size="20" value="<?php echo set_value('artist'); ?>"/><br /> 
       <input type="file" name="userfile" size="20" /><br /> 
       <input type="radio" name="license" id="license" value="owner"/>I AM the artist/owner of this song and I have the right for distribution<br /> 
       <input type="radio" name="license" id="license" value="not owner"/>I AM NOT the artist/owner of this song BUT I have the right for distribution</br> 
       <input type="checkbox" name="song_license_agreement"/>By selecting this option, I swear that all information entered is right<br /> 
       <input type="submit" id="song_upload_submit" value="Upload Your Song"/> 
       </form> 
      </article> 
      <ul id="playlist"> 
       <!-- your song goes here --> 
      </ul> 
     </section> 

これはTEアップロードを処理するために、私のコントローラ内の関数である:

function do_upload_song() 
    { 
     //$file_element_name = 'users_song'; 

     $config['upload_path'] = './media/'; 
     $config['allowed_types'] = 'mp3'; 
     $config['max_size'] = '30720'; 
     $config['encrypt_name'] = TRUE; 

     $this->load->library('upload', $config); 
     //set validation rules 
     $this->form_validation->set_rules('title', 'Song title', 'trim|required|xss_clean'); 
     $this->form_validation->set_rules('album', 'Album', 'trim|required|xss_clean'); 
     $this->form_validation->set_rules('artist', 'Artist', 'required|xss_clean'); 
     $this->form_validation->set_rules('license', 'License', 'required'); 
     $this->form_validation->set_rules('song_license_agreement', 'License Agreement', 'required'); 

     if ($this->form_validation->run() == FALSE) 
     { 
      $this->session->set_flashdata('info', validation_errors()); 
      redirect('profile'); 
     } 
     else 
     { 
      if (! $this->upload->do_upload()) 
      { 
       $this->session->set_flashdata('info', $this->upload->display_errors()); 
       redirect('profile'); 
      } 
      else 
      { 
       $data = $this->upload->data(); 
       $add_song = $this->media_model->add_song($data['file_name']); 
       if($add_song) 
       { 
        $this->session->set_flashdata('info', 'Your song has been uploaded'); 
        redirect('profile'); 
       } 
       else 
       { 
        unlink($data['full_path']); 
        $this->session->set_flashdata('info', 'Song upload fail'); 
        redirect('profile'); 
       } 

      } 
      @unlink($_FILES); 
     } 

    } 

そして、これは私の.js

$(document).ready(function(){ 
$('#song_upload_form').hide(); 
    $('#song_upload_menu').click(function(e){        
     $('#song_upload_form').dialog({ 
         title: 'Upload the cool track man!', 
         width: 520, 
         show: 'fade', 
         hide: 'fade', 
         modal: true 
         });      
     e.preventDefault(); 
    }); 
}); 
です

JSスクリプトはモーダルフォームをポップアウトさせますが、それ以降は何をすべきかわかりません。私はちょうどajax経由でデータを送ることができます。しかし、ファイルは異なります。私は彼らがajax経由で送ることができないことを知っています。私がネット上で見つけた多くの記事は、Iframeに関することを教えてくれましたが、ファイルのみを扱っています。データとファイルを同時に送信するためにajaxをシミュレートしている私の問題を解決するための実用的な解決策を見つけることができません。アドバイスの人?ありがとう

答えて

2

私はちょうどこれについて自分自身を読んでいた。ここをクリックしてください:http://joekuan.wordpress.com/2009/06/12/ajax-a-simplified-version-of-file-upload-form-using-iframe/

フォームのアップロードを非表示のiframeにリダイレクトすることができます。かなりクール。私はまだそれを自分で試してみましたが、オンラインであらゆる種類の情報を見つけることができるはずです。

+0

テキストやラジオボタンなどの入力タイプが複数ある場合(上記のコードと同じように)、IFrameでは引き続き動作します。私は最後のナイトを試しましたが、うまくいかないようです。または多分私は何かを逃した。私はあなたが私に与えたチュートリアルを試してみます。私はあなたに知らせるでしょう:-) – under5hell

+0

私はそれがまだ動作するはずだと思います。それは私が取り組んでいることの次のものですが、私は始めに消極的です:) – mowwwalker

+0

@ under5hell、私はいくつかのテストを行い、私のために働いていないものは、私がenctype PHPのドキュメントで指定されているように: 'enctype =" multipart/form-data "' http://us.php.net/manual/en/features.file-upload.post-method.php – mowwwalker

関連する問題