Ajax文件上传问题

Question

我正在开发一个需要做多个文件上传的CakePHP Web应用程序。

我已经实现了一个Ajax File Upload插件来帮助我做到这一点。但是，由于我的表单元素必须提交给Controller，所以我不能将它设置为我自己的PHP上传脚本action。

有没有办法让我在我的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'; 
} 

}); 

该脚本中的某处我需要告诉它哪个PHP脚本用于上传。我只是不确定在哪里以及如何。任何帮助将不胜感激。谢谢。

Answer 1

按照您提供Ajax File Upload演示链接，上传的文件将被张贴到upload.php的

现在，在这里写这篇upload.php的名字， 简单，

<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> 

在上面的代码中，表单操作数据action="upload.php"决定了发布url名称。 因此，让我们说，如果你想发布到一些控制器的操作方法，那么而不是upload.php写下你的控制器的操作方法名称。

对于不同的网址，请尝试

$(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'; 
} 

});