Javascript Ajax文件上传问题

我正在开发一个CakePHP web应用程序，它需要进行多个文件上传

我已经实现了一个插件来帮助我做到这一点。但是，由于我的表单元素必须提交给控制器，因此我无法将它的

操作

设置为我自己的PHP上载脚本

我有没有办法在JavaScript中设置PHP上传脚本，并将表单提交给它的控制器

这是我正在使用的JS脚本

$(function(){

var ul = $('#attachments_plugin ul');

$('#drop a').click(function(){
    // Simulate a click on the file input button
    // to show the file browser dialog
    $(this).parent().find('input').click();
});

// Initialize the jQuery File Upload plugin
$('#attachments_plugin').fileupload({

    // This element will accept file drag/drop uploading
    dropZone: $('#drop'),

    // This function is called when a file is added to the queue;
    // either via the browse button, or via drag/drop:
    add: function (e, data) {

        var tpl = $('<li class="working"><input type="text" value="0" data-width="20" data-height="20"'+
            ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

        // Append the file name and file size
        tpl.find('p').text(data.files[0].name)
                     .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

        // Add the HTML to the UL element
        data.context = tpl.appendTo(ul);

        // Initialize the knob plugin
        tpl.find('input').knob();

        // Listen for clicks on the cancel icon
        tpl.find('span').click(function(){

            if(tpl.hasClass('working')){
                jqXHR.abort();
            }

            tpl.fadeOut(function(){
                tpl.remove();
            });

        });

        // Automatically upload the file once it is added to the queue
        var jqXHR = data.submit();
    },

    progress: function(e, data){

        // Calculate the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);

        // Update the hidden input field and trigger a change
        // so that the jQuery knob plugin knows to update the dial
        data.context.find('input').val(progress).change();

        if(progress == 100){
            data.context.removeClass('working');
        }
    },

    fail:function(e, data){
        // Something has gone wrong!
        data.context.addClass('error');
    }

});


// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
    e.preventDefault();
});

// Helper function that formats the file sizes
function formatFileSize(bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }

    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }

    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }

    return (bytes / 1000).toFixed(2) + ' KB';
}

}); 

$（函数（）{
var ul=$（“#附件#ul”）；
$（'#拖放a'）。单击（函数（）{
//模拟单击“文件输入”按钮
//显示“文件浏览器”对话框的步骤
$（this）.parent（）.find（'input'）。单击（）；
});
//初始化jQuery文件上传插件
$（'#附件_插件'）。文件上载({
//此元素将接受文件拖放上载
dropZone:$（“#drop”），
//将文件添加到队列时调用此函数；
//通过浏览按钮或通过拖放：
添加：功能（e、数据）{
var tpl=$（'
'）；
//附加文件名和文件大小
tpl.find（'p'）.text（data.files[0].name）
.append（“”+formatFileSize（data.files[0].size）+“”）；
//将HTML添加到UL元素
data.context=tpl.appendTo（ul）；
//初始化旋钮插件
tpl.find（'input'）.knob（）；
//收听“取消”图标上的单击
tpl.find（'span'）。单击（函数（）{
if（tpl.hasClass（“工作”））{
jqXHR.abort（）；
}
tpl.fadeOut（函数（）{
tpl.remove（）；
});
});
//将文件添加到队列后自动上载该文件
var jqXHR=data.submit（）；
},
进度：功能（e、数据）{
//计算上载的完成百分比
var progress=parseInt（data.loaded/data.total*100,10）；
//更新隐藏的输入字段并触发更改
//让jQuery旋钮插件知道如何更新拨号盘
data.context.find（'input'）.val（progress.change（）；
如果（进度==100）{
data.context.removeClass（'working'）；
}
},
失败：功能（e，数据）{
//出了点问题！
data.context.addClass（'error'）；
}
});
//防止在窗口上删除文件时执行默认操作
$（文档）.on（'drop dragover'，函数（e）{
e、 预防默认值（）；
});
//用于格式化文件大小的辅助函数
函数formatFileSize（字节）{
如果（字节类型！=='number'）{
返回“”；
}
如果（字节数>=100000000）{
返回（字节/100000000）.toFixed（2）+“GB”；
}
如果（字节>=1000000）{
返回（字节/1000000）.toFixed（2）+'MB'；
}
返回（字节/1000）.toFixed（2）+'KB'；
}
}); 

---

在这个脚本的某个地方，我需要告诉它使用哪个PHP脚本进行上传。我只是不知道去哪里，怎么去。任何帮助都将不胜感激。谢谢。

根据您提供的演示链接，上传文件将发布到upload.php

现在，在哪里写这个upload.php名称， 简单,

---

谢谢你的回复。我不确定你是否理解我的问题。我知道如何将我的表单提交给它的控制器，我需要知道的是如何告诉JavaScript使用哪个PHP上传脚本。。由于我的表单

操作

指向控制器。对此我深表歉意，请尝试$（'#fileupload'）.fileupload（{url:'/path/to/upload/handler.json'）；

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
            <div id="drop">
                Drop Here

                <a>Browse</a>
                <input type="file" name="upl" multiple="">
            </div>

            <ul>
                <!-- The file uploads will be shown here -->
            </ul>

        </form>

$(function(){

var ul = $('#attachments_plugin ul');

$('#drop a').click(function(){
    // Simulate a click on the file input button
    // to show the file browser dialog
    $(this).parent().find('input').click();
});

// Initialize the jQuery File Upload plugin
$('#attachments_plugin').fileupload({
    url: '/path/to/upload/',

    // This element will accept file drag/drop uploading
    dropZone: $('#drop'),

    // This function is called when a file is added to the queue;
    // either via the browse button, or via drag/drop:
    add: function (e, data) {

        var tpl = $('<li class="working"><input type="text" value="0" data-width="20" data-height="20"'+
            ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

        // Append the file name and file size
        tpl.find('p').text(data.files[0].name)
                     .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

        // Add the HTML to the UL element
        data.context = tpl.appendTo(ul);

        // Initialize the knob plugin
        tpl.find('input').knob();

        // Listen for clicks on the cancel icon
        tpl.find('span').click(function(){

            if(tpl.hasClass('working')){
                jqXHR.abort();
            }

            tpl.fadeOut(function(){
                tpl.remove();
            });

        });

        // Automatically upload the file once it is added to the queue
        var jqXHR = data.submit();
    },

    progress: function(e, data){

        // Calculate the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);

        // Update the hidden input field and trigger a change
        // so that the jQuery knob plugin knows to update the dial
        data.context.find('input').val(progress).change();

        if(progress == 100){
            data.context.removeClass('working');
        }
    },

    fail:function(e, data){
        // Something has gone wrong!
        data.context.addClass('error');
    }

});


// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
    e.preventDefault();
});

// Helper function that formats the file sizes
function formatFileSize(bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }

    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }

    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }

    return (bytes / 1000).toFixed(2) + ' KB';
}

});