Multiform ajax帖子

时间:2013-12-02 19:58:19

标签: javascript php jquery ajax codeigniter

我使用jQuery的multipost文件有问题。当我回显结果时,服务器返回

  

遇到PHP错误。严重程度:通知;消息:未定义的索引:files []

我使用的是php-framework CodeIgniter。 这是一个jQuery代码:

    jQuery(document).ready(function($){
        $("#new_article").submit(function(event){
            event.preventDefault();
            var $form = $(this),
            url = $(this).attr("action");]
            var files = $form.find('input[name="files[]"]').val();
            var posting = $.post(url,{
                files: files
            });
            posting.done(function(data){
               $("#result").empty().append(data);
            });
            return false;
        });
    });

这是一个HTML代码:

<form method="post" enctype="multipart/formdata" action="/upload" id="new_article">
    <input class="text-input" id="files" name="files[]" type="file" multiple="" accept="image/*" />
    <input type="submit" name="submit" value="Submit" />
</form>

1 个答案:

答案 0 :(得分:0)

你是如何回应它的?

我测试了你的代码,它可以满足你的要求。它发送文件名,但不发送文件。

运行

var_dump($_POST['files']) 

它会显示文件的名称。

但是如果你需要上传文件,这是一个实际的解决方案:

我建议使用下一个库
1. AjaxFileUpload(http://www.phpletter.com/Our-Projects/AjaxFileUpload/
2. CodeIgniter多重上传https://github.com/stvnthomas/CodeIgniter-Multi-Upload

您的表格:

<form method="post" enctype="multipart/formdata" action="/upload" id="upload_file">
    <input class="text-input" id="files" name="files[]" type="file" multiple="" accept="image/*" />
    <input type="submit" name="submit" id="submit" />
</form>

你的JS脚本:

<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/ajaxfileupload.js"></script>
<script>
    $(function() {
        $('#upload_file').submit(function(e) {
            e.preventDefault();
            $.ajaxFileUpload({
                url         :'/upload',
                secureuri      :false,
                fileElementId  : 'files',
                dataType    : 'json',
                data        : {
                    'somedata'  :  'somedata'
                },
                success  : function (data, status)
                {
                    //do something here
                }
            });
        });
    });
</script>

您的Codeigniter上传方法:

public function upload()
{
    $status = "";
    $msg = "";
    $file_element_name = 'files';

    if ($status != "error")
    {
        $this->load->library('upload');
        $this->upload->initialize(array( // takes an array of initialization options
            "upload_path" => "/mnt/httpd/htdocs/codeig/files/",  // physical path where the files should be saved
            "overwrite" => TRUE,
            "encrypt_name" => TRUE,
            "remove_spaces" => TRUE,
            "allowed_types" => "gif|jpg|png|doc|txt",
            "max_size" => 30000,
            "xss_clean" => FALSE
        ));

        if (!$this->upload->do_multi_upload($file_element_name))
        {
            $status = 'error';
            $msg = $this->upload->display_errors('', '');
        }
        else
        {
            $data = $this->upload->get_multi_upload_data();
            if($data)
            {
                $status = "success";
                $msg = "File successfully uploaded";
            }
            else
            {
                $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));
}