У кого-нибудь есть хороший пример / учебное пособие о том, как использовать jQuery Form Upload?

Question

После тестирования AjaxFileUpload Plugin Я обнаружил, что он не позволяет мне извлекать $_POST данные, так как плагин передает только $_FILE данные.Поэтому я перехожу к плагину jQuery Form, который задокументирован здесь: http://www.malsup.com/jquery/form/#file-upload

К сожалению, я чувствую, что пример плохой и не очень мне помогает.Мне нужно использовать IFrame, чтобы предотвратить перезагрузку страницы.

Есть ли у кого-нибудь работающий код или ссылка на учебники бога с использованием плагина jQuery Form для загрузки файлов с использованием IFrame?

Я знаю тамдругие плагины для загрузки файлов, но я хотел бы использовать этот для этого проекта.

ОБНОВЛЕНИЕ
Это код, который я сейчас использую.Все, что он делает, это перераспределяет страницу, и я не получаю вывод / предупреждения.

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

необходимо связать событие отправки

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

Uploadify - определенно путь;взгляните на это, чтобы получить больше советов:

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

Answer 4

Я использовал 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);                    
            }
          });
  }