一键上传(ocupload) jquery插件和cakephp 2


one click upload (ocupload) jquery plugin and cakephp 2

我正在尝试使用jquery的'一键上传'插件http://code.google.com/p/ocupload/wiki/Documentation

它是一个插件,它可以将正常的输入type="file"变成你想要的任何元素,例如div,所以当你点击这个div时,文件浏览器将打开,允许你选择要上传的文件。然后,它提交一个隐藏的表单,其中涉及到一个iframe,我相信这个概念是众所周知的,但不是我。

不管怎样,到目前为止一切都很好…我有我的div打开一个文件浏览器。

问题是,当一个文件被选中时,插件应该自动将表单提交给您定义的操作。这似乎没有正确地发生,我认为这可能与我瞄准的形式的动作有关。

所以在我看来,要添加一个新的'tile',我有:

<div id="TileImageUpload">Upload an image</div>

然后将javascript附加到div:

$(document).ready(function(){
    //one click image upload
    var myUpload = $('#TileImageUpload').upload({
            name: 'file',
            action: '../tiles/uploadImage',
            enctype: 'multipart/form-data',
            params: {upload:'Upload'},
            autoSubmit: true,
            onSubmit: function() {
                alert('submitted');
                $('#upload_status').html('').hide();
                loadingmessage('Please wait, uploading file...', 'show');
            },
            onComplete: function(response) {
                alert(response);
            },
            onSelect: function() {}
    });

});

在上面的动作参数是指我的我的贴图控制器动作=>uploadImage。它看起来像:

function uploadImage() {
    if ($_POST["upload"]=="Upload") { 
        return 'wooHoo';
    } else {
        return 'BooHoo';
    }
}

我也试过回"WoHoo"等,但没有什么不同。

基本上,如果有一个成功的表单发布,那么它应该返回WooHoo给javascript,然后javascript应该提醒它。

这是不可能的。有人知道为什么吗?就像我说的,我认为可能与表单动作有关,但我已经尝试了所有我能想到的方法。

插件的实际JS并不大,在这里发布可能会超过顶部。如果有好心的人同情我,愿意帮助我,可以在我上面贴的链接上找到。

你不应该使用'return',而应该使用'echo'。

然而,由于你在这种情况下没有使用视图文件的操作,你也应该禁用'autoRender';

$this->autoRender = false;

否则CakePHP会抛出'view not found'异常。

此外,要获取CakePHP内部发布的数据,请使用Request对象;

例如:

$this->autoRender = false;
if($this->request->is('post')) {
    echo 'data is posted. This is the content of the request:';
    debug($this->request->data);
} else {
    echo 'no form is posted';
}

最后,如果您想返回JSON数据,请参阅手册

的这些部分。

http://book.cakephp.org/2.0/en/controllers/request-response.html cakeresponse

http://book.cakephp.org/2.0/en/views/json-and-xml-views.html