Можно ли загрузить файл вместе с несколькими данными через iframe?

Question

Я использую codeigniter и JQuery. У меня есть форма загрузки в моем сценарии view. Форма загрузки состоит из нескольких текстовых входов и ввода файла. Форма выскочит, когда кто-то щелкнет по ссылке меню (я сделал это с формой Jquery Modal). Можно ли каким-либо образом смоделировать ajax-вызов при отправке формы? поэтому, когда пользователь нажимает кнопку «Отправить», файл будет отправлен в каталог на сервере, и поэтому информация будет храниться в базе данных.

вот мой код: ВЗГЛЯД:

<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> 

это функция в мой контроллер для обработки тэ загрузки:

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 для отправки данных и файлов одновременно. Любые советы ребята? Спасибо

Answer 1

Я просто читал об этом сам. Смотрите здесь: http://joekuan.wordpress.com/2009/06/12/ajax-a-simplified-version-of-file-upload-form-using-iframe/

В нем говорится, что вы можете перенаправить загрузку формы на скрытый iframe. Довольно круто. Я еще не пробовал это самостоятельно, но вы должны быть в состоянии найти всю информацию об этом в Интернете.