有没有人有一个很好的例子/教程如何使用jQuery表单上传？ [英] Does anyone have a good example / tutorial on how to use jQuery Form Upload?

问题描述

测试了 AjaxFileUpload Plugin 后，我发现它不会让我检索< code $ $ POST 数据，因为插件只提交 $ _ FILE 数据。因此，我转向jQuery表单插件这是记录在这里： http：//www.malsup .com / jquery / form /＃file-upload

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

有没有人有一些工作代码链接到上帝教程使用jQuery表单插件上传文件使用IFrame？

我知道还有其他的文件上传插件，但是我想用这个来做这个项目。

更新

这是我目前使用的代码。它所做的就是重新显示页面，而且我没有输出/提醒。

$ b

HTML

 < form id =uploadFormenctype =multipart / form-dataaction =method =POST> 
< input type =hiddenname =MAX_FILE_SIZEvalue =1000000/> 
< input type =hiddenid =current_pathname =current_pathvalue =<？php echo $ fb-> relative_url;？> /> 
< input id =uploadFilename =uploadFiletype =file/> 
< input type =submitclass =button uploadImagevalue =<？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

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

但是我的页面只能重新加载，并且不会触发任何提醒：（$ / b

DEBUG $ b

在我的JS文件中运行以下脚本： alert（jQuery（'

  function（options）{
 if（this.length === 0）{
 var o = {s：this.selector，c：this.context}; 
 if（！jQuery.isReady&& os ）{
 log（DOM not ready，queuing ajaxForm）; 
 jQuery（function（）{jQuery（os，oc）.ajaxForm（options）;}）; 
 return this; 
} 
 log（终止;选择器找到的零个元素+（jQuery.isReady？（DOM not ready）））; 
 return this; 
 } 
 return this.ajaxFormUnbind（）。bind（submit.form-plugin，function（e）{if（！e.isDefaultPrevented（））{e.preventDefault（）; 
 jQuery ）.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）;}）; 
 
 
 
 $ b $ p 
 $ b 
从调试开始，当我运行时，它看起来像表单没有完成加载这个脚本。这太奇怪了，因为我把它放在 jQuery（document）.ready（）中。
解决方案
 
我最终使用了。
 
 
 <为了让这段代码正常工作，我使用了以下脚本： 
 
 
  / *品牌logo uploadify 
 --- -------------------------------------------------- ------------------------ * / 
 function uploadifyBrandLogo（）
 {
 
 // Get品牌ID，因为加载uploadify.php会触发新会话
 var brand_id = jQuery（'＃brand_id'）。val（）; 
 $ b $ j jQuery（＃brand_btnBrowseLogo）。uploadify（{
'uploader'：siteURL +'/wp-content/plugins/uploadify/uploadify.swf'，
'脚本'：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）{
 //在这里做的
} 
 
 //显示上传反馈
 showfeedback（result.feedback）; 
} 
}）; 
} 
  
 
After testing AjaxFileUpload Plugin I discovered that it does not let me retrieve $_POST data, as the plugin only submits $_FILE data. Therefore I turn to jQuery Form Plugin which is documented here: http://www.malsup.com/jquery/form/#file-upload

Unfortunately, I feel the example is poor and doesn't really help me. I need to use IFrame in order to prevent the page to reload.

Does anyone have some working code og link to god tutorials using jQuery Form plugin for uploading files using IFrame?

I know there are other file upload plugins, but I would like to use this one for this project.

UPDATE

This is the code I currently use. All it does is relaod the page and I get no output / alerts.

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;
});
I also tried this 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'
});
But still my page only reloads and no alerts are fired :(

DEBUG  

Running the following script in my JS file: alert(jQuery('#uploadForm').ajaxForm); gave me this output:
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);});
}
From the debugging, it looks like the form is not finished loading when I run this script. That's weird, because I have it inside jQuery(document).ready().
解决方案
I ended up using Uploadify.

To get this code working, I use the following script:
  /*  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);                    
            }
          });
  }


                        
这篇关于有没有人有一个很好的例子/教程如何使用jQuery表单上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！