jquery：如何在 jquery 中序列化文件类型输入

Question

我想序列化输入类型 file 中上传的文件的文件名，但是当我在 jquery 中序列化表单时，我只得到输入类型文本，而其他不是文件 - 我该怎么做？这是jquery无法实现的东西吗？

这是 html/php：

<form action="<?php echo HTTP_ROOT.INC_LAYOUT;?>ask_add_xml.php" method="post" enctype="multipart/form-data" id="form_qna_ask">

        <div class="item-form">
            <h2><a href="#"><span>ASK</span></a></h2>
            <label id="ask_title_label">
            <input type="text" name="ask_title" id="ask_title" value="" title="TYPE IN A TITLE"/>
            </label>
        </div>

        <div class="item-form">
            <h2><a href="#"><span>EMAIL</span></a></h2>
            <label id="ask_email_label">
            <input type="text" name="ask_email" id="ask_email" value="" title="TYPE IN YOUR EMAIL"/>
            </label>
        </div>

        <div class="item-form">
            <label id="ask_content_label">
                <textarea name="ask_content" id="content_mce" title="CONTENT"></textarea>
            </label>
        </div>

        <div class="item-form">
            <div class="left">
                <label>
                <img src="views/www/styles/images/global/button-add-images-q-n-a.gif" alt="add images" style="float:left;"/> 
                <h2 id="add_images_label"><a href="#"><span>Add Images</span></a></h2>
                </label>
            </div>

            <div class="right">
                <div class="processing"></div>
                <input type="submit" name="cancel" value="CANCEL"/>
                <input type="submit" name="submit" value="SUBMIT"/>
            </div>
        </div>


        <div class="item-form" style="border:1px solid #bbbbbb; padding:10px 10px 20px 15px; background-color:#ffffff;">
            <p>Add images: this allows you to attach pictures to your question. Only 2 pictures at 2MB each are allowed to upload.</p>
            <input type="file" name="image[]"/>
            <input type="file" name="image[]" />
        </div>

    </form>

这是 jquery，

this.postForm_ask = function(){
$("#form_qna_ask").submit(function(){
    $('#popup_result').remove();
    var path = $(this).attr('action');
    var processing = $('#q-n-a .processing');
    processing
        .css({
            margin:"0px 0px 0px -80px",
            position:"absolute",
            visibility:"visible"
            });

    processing.html('<div><p><img src="'+http_root+img_global+'loader-2b.gif"/> loading</p></div>');
    $.post(path, $("#form_qna_ask").serialize(),function(xml){
            alert($("#form_qna_ask").serialize());
            processing
                .css({
                    visibility:"hidden"
                    });
            processAsk(xml);
        });
    return false;
    });
}

非常感谢， 刘

Answer 1

谢谢你们。刚刚用下面的插件整理好了！

http://malsup.com/jquery/form/#getting-started

最终代码，

this.postForm_ask = function(){

 $('#form_qna_ask').submit(function() { 
  var processing = $('#q-n-a .processing');
  processing
   .css({
    margin:"0px 0px 0px -80px",
    position:"absolute",
    visibility:"visible"
    });
  processing.html('<div><p><img src="'+http_root+img_global+'loader-2b.gif"/> loading</p></div>');
  $(this).ajaxSubmit({ 
   target: '#output',
   // dataType identifies the expected content type of the server response 
   dataType:  'xml', 

   // success identifies the function to invoke when the server response 
   // has been received 
   success: processXML_ask 
  }); 
        return false; 
 });

}

this.processXML_ask = function(xml){ //  ==  function addMessages(xml) {  

 var processing = $('#q-n-a .processing');
 processing.css({
     visibility:"hidden"
     });

 $(document.body).append("<div id=\"popup_result\" class=\"popup\"></div>");
 var target = $('#popup_result');
 var scrollTop = $(window).scrollTop();
 var scrollLeft = $(window).scrollLeft();
 var width = 400;
 var top = 200;
 var marginLeft = "-"+ ((scrollLeft + width)/2);
 target
  .css({
   top:(scrollTop + top) + "px", 
   left:"50%",
   marginLeft:marginLeft + "px",
   width:width + "px",
   zIndex:"11",
   display:"none"
   });

 target.load(http_root+inc_layout+"result.php", {}, function(){
 $("error", xml).each(function(){
  var elementid = $(this).attr('elementid');
  var message = $(this).attr('message');
  //alert(elementid);
  $("#"+elementid+"_label").addClass('error-qna');
  $(".result").append("<img src='"+http_root+img_global+"attention.png' /> <b>" + message + "</b> <br />");
   target.fadeIn('slow', function(){ 
    closePopup(target);
    //$('form *[title]').inputHint();
   }); 
  });
 $("result", xml).each(function(){
  var message = $(this).attr('message');
  $(".result").append("<img src='"+http_root+img_global+"info.png' /> <b>" + message + "</b> <br />");
   target.fadeIn('slow', function(){ 
    closePopup(target);
    clearFormElements('form');
    $('.form *[title]').inputHint();
    $('input:file').MultiFile('reset');
   }); 
  }); 
 });
}

Answer 2

您确定要做这个服务器端吗？该文件以二进制形式发送，因此无论如何都无法通过 XHR 发送。

如果您想要即时文件上传，请尝试使用 iframe。