jquery: how do I serialize file type input in jquery

Question

Hi,

I want to serialize file name of the file being uploaded in the input type file , but when I serialized the form in jquery I just got the input type text and others not the file - how do I do it? is it something jquery fails to achieve??

this is the html,

[PHP]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>[/PHP]

this is the 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;
    });
}

many thanks, Lau

Answer 1

Surely you want to do this server side? The file is sent in binary so it cannot be sent via XHR anyway.

If you want instant file uploads try using an iframe.

Answer 2

thanks guys. just got it sorted with plug in below!

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

final code,

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');
   }); 
  }); 
 });
}