Question

经过测试AjaxFileUpload Plugin我发现它不允许我检索$_POST数据，因为插件只提交$_FILE数据。因此，我转向jQuery表单插件，这里有文档：http://www.malsup.com/jquery/form/#file-upload

不幸的是，我觉得这个例子很差，并没有真正帮助我。我需要使用IFrame以防止页面重新加载。

有没有人有一些工作代码og链接到上帝教程使用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。

要使此代码正常工作，我使用以下脚本：

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

上传是绝对可行的方法;看看这个以获得更多建议：

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

有没有人有关于如何使用jQuery表单上传的好示例/教程？

4 个答案: