是否可以通过iframe上传文件和多个数据?

时间:2012-01-23 07:29:57

标签: javascript jquery ajax codeigniter

我正在使用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>

这是我的控制器中处理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同时发送数据和文件。有什么建议吗?感谢

1 个答案:

答案 0 :(得分:2)

我自己就是在读这个。看这里:http://joekuan.wordpress.com/2009/06/12/ajax-a-simplified-version-of-file-upload-form-using-iframe/

它表示您可以将表单上传重定向到隐藏的iframe。很酷。我还没有尝试过,但你应该可以在网上找到各种有关它的信息。