I can't start uploading files using jQuery Uploadify in Cake PHP

I've included the js and css files, in the frontend all is loaded correctly, but when I click on

<a h开发者_如何学Goref="javascript:$('#file_upload').uploadifyUpload();"> Upload </a>

nothing happens, not receiving any error in firebug.

Basically, I can't upload files. Even if the uploadify option "auto" is set to "true".

How to repair this? What can be wrong?

My code:

<script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.imgareaselect.min.js"></script>

    <script type="text/javascript" src="/js/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="/js/uploadify/swfobject.js"></script>
    <script type="text/javascript" src="/js/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600,
        'speedOut'      :   200,
        'width': 500,
        'height' : 400,
        'overlayShow'   :   false
    });
});

//]]>
</script>
    <script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#file_upload").uploadify({
        "uploader": "/js/uploadify/uploadify.swf",
        "script": "/uploadify/upload",
        "cancelImg": "/img/uploadify/cancel.png",
        "scriptData": {'type': 1},
        'removeCompleted' : true,
        'folder': '/uploads',
        "auto": true,
        "multi": false,
        "onComplete": function(event, ID, fileObj, response, data) {

        },
        'onError': function (event, ID, fileObj, errorObj) {
            alert(errorObj.type + ' Error: ' + errorObj.info);
        }
    }); 
});
</script>


<input type="file" id="file_upload" name="file_upload" />

<a href="javascript:$('#file_upload').uploadifyUpload();">Upload</a>

Thanks

---

I would assume - since your using jQuery that the code should be as follows:

<script type="text/javascript">
    $().ready(function() {
        $('#upload').click(function() {
            $('#file_upload').uploadifyUpload();
        });
    });
</script>

<a href="" id="upload">Upload</a>

This would be more in line with the way jQuery usually works.

---

Shouldn't that be the onclick event?

<a href="#" onclick="javascript:$('#file_upload').uploadifyUpload();"> Upload </a>

If auto is set to true the files should upload automatically as soon as they are selected so you don't even need an upload link/button. Just put this inside your document ready function.

$("#file_upload").uploadify({
    'uploader'  : '/js/uploadify/uploadify.swf',
    'script'    : '/js/uploadify/uploadify.php',
    'cancelImg' : '/js/uploadify/cancel.png',
    'folder'    : '/some_folder',
    'fileExt'   : '*.jpg;*.jpeg;*.gif;*.png',
    'auto'      : true});

---

Is it possible you need to use a complete form tag? To get the multipart/form-data generated automagically you can do:

<?php $this->Form->create('Document', array('type' => 'file')); ?>

I don't know if uploadify requires a form tag but it seems logical that if the demo here shows a complete form tag that your test script should have one also -

http://uploadify.wdwebdesign.com.br/ This is the 3.0 demo - which might be newer than your version but the code on both demos shows a complete form. Again, your code as shown does not.

---

maybe you can try this:

href="javascript:$('#custom_file_upload').uploadifyUpload($('.uploadifyQueueItem').last().attr('id').replace('custom_file_upload',''))

from the offical demo uploadifyupload