Question

我正在异步上传图片，为此我获得了this good tutorial。我阅读了所有内容并试图删除我不需要的模型并根据我的需要制作它，但是当我运行时我没有收到任何错误，文件也没有上传。

我在控制器上传功能中放了一个echo，但我也没有得到echo字符串，即使我把完整路径放在ajaxfileupload URL中。

以下是我的观点：

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="<?php echo site_url()?>public/assets/js/ajaxfileupload.js"></script>
        <script>
            $(function() {
                $('#upload_file').submit(function(e) {
                    e.preventDefault();
                    $.ajaxFileUpload({
                        url          : 'upload2/upload_file',
                        secureuri    :  false,
                        fileElementId: 'userfile',
                        dataType     : 'json',
                        data         : {
                                           'title': $('#title').val()
                                       },
                        success : function (data, status)
                        {
                            if(data.status != 'error')
                            {
                                $('#files').html('<p>Reloading files...</p>');
                                refresh_files();
                                $('#title').val('');
                            }
                            alert(data.msg);
                        }
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
          <h1>Upload File</h1>
          <form method="post" action="" id="upload_file">
          <label for="title">Title</label>
          <input type="text" name="title" id="title" value="" />

          <label for="userfile">File</label>
          <input type="file" name="userfile" id="userfile" size="20" />

          <input type="submit" name="submit" id="submit" />
          </form>
          <h2>Files</h2>
          <div id="files"></div>
    </body>
</html>

我的控制器是这样的：

<?php
    class Upload2 extends CI_Controller
    {
        public function __construct()
        {
            parent::__construct();

            $this->load->helper('url');
        }

        public function index()
        {
            $this->load->view('upload');
        }
        public function upload_file()
        {
            /* It's not even showing me this echo and the path is
               OK too, and even I put the whole path but no result. */

            echo "in upload_file";
            $status = "";
            $msg = "";
            $file_element_name = 'userfile';

            if (empty($_POST['title']))
            {
                $status = "error";
                $msg = "Please enter a title";
            }

            if ($status != "error")
            {
                $config['upload_path'] = './uploads/';
                $config['allowed_types'] = 'gif|jpg|png|doc|txt';
                $config['max_size']  = 1024 * 8;
                $config['encrypt_name'] = TRUE;

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

                if (!$this->upload->do_upload($file_element_name))
                {
                    $status = 'error';
                    $msg = $this->upload->display_errors('', '');
                }
                else
                {
                    $data = $this->upload->data();
                    $file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
                    if($file_id)
                    {
                        $status = "success";
                        $msg = "File successfully uploaded";
                    }
                    else
                    {
                        unlink($data['full_path']);
                        $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));
        }
    }
?>

Answer 1

将此属性添加到表单enctype="multipart/form-data"

Answer 2

没有任何插件或外部脚本，这是可行的。您需要文件上传元素，iFrame返回数据和简单的Ajax脚本。

文件上传元素：

echo '<input type="file" name="prodImageUpload"
id="prodImageUpload" onchange="return ajaxFileUpload(this);"/>'

的iFrame：

<iframe name="upload_iframe" id="upload_iframe" style="display:block;width:720px;"></iframe>

JavaScript脚本：

function ajaxFileUpload(upload_field)
{
    var re_text = /\.jpg|\.gif|\.jpeg|\.png/i;
    var filename = upload_field.value;
    var imagename = filename.replace("C:\\fakepath\\","");
    if (filename.search(re_text) == -1)
    {
        alert("File must be an image");
        upload_field.form.reset();
        return false;
    }
    upload_field.form.action = "addProductImage";
    upload_field.form.target = "upload_iframe";
    upload_field.form.submit();
    upload_field.form.action = "";
    upload_field.form.target = "";
    return true;
}

在我的控制器中，我有一个自定义上传，但这是无关紧要的。您需要做的就是上传控件名称和最终路径。如果有任何文件名和大小，如果它可以打印到iFrame，我会回显错误。它很简单，工作正常。

CodeIgniter的ajaxfileupload问题

2 个答案: