有沒有人有一個很好的示例/教程如何使用jQuery表單上傳？

Question

經過測試AjaxFileUpload Plugin我發現它不讓我檢索$_POST數據，因爲插件只提交$_FILE數據。因此，我轉向jQuery表格插件這是記錄在這裏：http://www.malsup.com/jquery/form/#file-upload

不幸的是，我覺得這個例子很差，並沒有真正幫助我。我需要使用IFrame以防止頁面重新加載。

有沒有人有一些工作代碼og鏈接上帝教程使用jQuery表單插件上傳文件使用IFrame？

我知道還有其他文件上傳插件，但我想用這個項目。

UPDATE
這是我目前使用的代碼。它所做的只是重新顯示頁面，我沒有輸出/警報。

HTML

<form id="uploadForm" enctype="multipart/form-data" action="" method="POST"> 
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> 
    <input type="hidden" id="current_path" name="current_path" value="<?php echo $fb->relative_url; ?>" /> 
    <input id="uploadFile" name="uploadFile" type="file" /> 
    <input type="submit" class="button uploadImage" value="<?php _e('Upload File') ?>" /> <br /> 
</form> 

的Javascript

var options = { 
    beforeSubmit: function() { alert('before');}, 
    success:  function(html) { alert('success + ' + html);}, 
    data:   {current_path: jQuery('#currentPath span').html()}, 
    url:   '../wp-content/plugins/wp-filebrowser/uploader.php', 
    iframe:   true, 
    dataType:  'html' 
}; 

jQuery('#uploadForm').submit(function() { 
    jQuery(this).ajaxSubmit(options); 
    return false; 
}); 

我也試過這個JS

jQuery('#uploadForm').ajaxForm({ 
    beforeSubmit: function() { alert('before');}, 
    success:  function(html) { alert('success + ' + html);}, 
    data:   {current_path: jQuery('#currentPath span').html()}, 
    url:   '../wp-content/plugins/wp-filebrowser/uploader.php', 
    dataType:  'html' 
}); 

但是還是我的頁面重新加載只，沒有警報被觸發:(

DEBUG

在我的JS文件中運行以下腳本：alert(jQuery('#uploadForm').ajaxForm);給了我這樣的輸出：

function (options) { 
    if (this.length === 0) { 
     var o = {s: this.selector, c: this.context}; 
     if (!jQuery.isReady && o.s) { 
      log("DOM not ready, queuing ajaxForm"); 
      jQuery(function() {jQuery(o.s, o.c).ajaxForm(options);}); 
      return this; 
     } 
     log("terminating; zero elements found by selector" + (jQuery.isReady ? "" : " (DOM not ready)")); 
     return this; 
    } 
    return this.ajaxFormUnbind().bind("submit.form-plugin", function (e) {if (!e.isDefaultPrevented()) {e.preventDefault(); 
jQuery(this).ajaxSubmit(options);}}).bind("click.form-plugin", function (e) {var target = e.target; 
var jQueryel = jQuery(target); 
if (!jQueryel.is(":submit,input:image")) {var t = jQueryel.closest(":submit"); 
if (t.length == 0) {return;}target = t[0];}var form = this; 
form.clk = target; 
if (target.type == "image") {if (e.offsetX != undefined) {form.clk_x = e.offsetX; 
form.clk_y = e.offsetY;} else if (typeof jQuery.fn.offset == "function") {var offset = jQueryel.offset(); 
form.clk_x = e.pageX - offset.left; 
form.clk_y = e.pageY - offset.top;} else {form.clk_x = e.pageX - target.offsetLeft;form.clk_y = e.pageY - target.offsetTop;}}setTimeout(function() {form.clk = form.clk_x = form.clk_y = null;}, 100);}); 
} 

從調試，它看起來像的形式還沒有完成加載，當我運行此腳本。這很奇怪，因爲我在jQuery(document).ready()之內。

Answer 1

最後我用Uploadify綁定。

爲了得到這個代碼的工作，我用下面的腳本：

/* Brand logo uploadify 
    -----------------------------------------------------------------------------*/  
    function uploadifyBrandLogo() 
    { 

      //Get brand ID because loading uploadify.php triggers a new session 
      var brand_id = jQuery('#brand_id').val(); 

      jQuery("#brand_btnBrowseLogo").uploadify({ 
      'uploader'  : siteURL + '/wp-content/plugins/uploadify/uploadify.swf', 
      'script'   : siteURL + '/wp-content/plugins/uploadify/uploadify.php', 
      'fileExt'  : '*.jpg;*.jpeg;*.png', 
      'auto'   : true, 
      'multi'   : false, 
      'method'   : 'POST', 
      'height'   : '29', 
      'width'   : '136', 
      'buttonImg'  : siteURL + '/wp-content/themes/storelocator/img/buttons/img_upload_grey_bg.png', 
      'cancelImg'  : siteURL + '/wp-content/plugins/uploadify/cancel.png', 
      'scriptData'  : {'var1':'data1','var2':data2}, 
      'onComplete'  : function(event, queueID, fileObj, response, data) { 
       // Do stuff here 
       } 

       // Show upload feedback 
       showFeedback(result.feedback);      
      } 
      }); 
    } 

Answer 2

如果您可以更具體地瞭解您需要做什麼，這將有所幫助。我之前使用過這個插件，所以可以展示一個簡單的例子。

您不需要IFrame來防止頁面重新加載。我同意文檔非常差，我不太瞭解IFrame，但發現它對我沒有任何效果。

<% using (Html.BeginForm("UploadDocument", "Documents", 
       new { wo = ViewContext.RouteData.Values["id"] }, 
       FormMethod.Post, 
       new { enctype = "multipart/form-data", @class="attachDocumentsForm" })) 
     {%> 
      <input type="file" name="fileInput" class="attachDocumentFileInput" size="100"/> 
      <input type="submit" class="attachDocumentsSubmit" value="Upload file" />  
      <input type="button" class="attachDocumentsCancel" value="Cancel" />  
     <% } %>  


$documentsForm.ajaxForm({ 
     dataType: 'json', 
     beforeSubmit: function() { 
      // ... 
     }, 
     success: function(data) { 
      if (data) { 
       // ... 
      } 
      else { 
       alert('Error uploading document. Upload failed.'); 
      } 
     } 
    }); 

希望有所幫助。

Answer 3

需要提交事件

// bind form using 'ajaxForm' 
    // bind to the form's submit event 
    $('#myForm1').submit(function() { 
     // inside event callbacks 'this' is the DOM element so we first 
     // wrap it in a jQuery object and then invoke ajaxSubmit 
     $(this).ajaxSubmit(options); 

     // !!! Important !!! 
     // always return false to prevent standard browser submit and page navigation 
     return false; 
    }); 

Answer 4

Uploadify肯定是要走的路;看看本作多一點忠告：

http://markp3rry.wordpress.com/2011/12/21/back-to-basics-file-uploads-view-jquery-net/