Jquery: how do I serialize file type input in jquery

Hi,

I want to serialize file name of the file being uploaded in the input type file <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,

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

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

JavaScript has no access to the content of the file that is entered in that field. At most the browser might allow access to the file name. Any processing you want to do with the file will need to be done on the server after it is uploaded to the temporary workspace there.

That’s not strictly true since Mozilla has recently added the FileReader interface to Firefox 3.6 and its other products. So it allows the browser to display a preview of an image, for example, or it seems it can even read the file as text.

But even webkit and Opera haven’t added support for this, so I’m just mentioning it out of interest rather than as a potential thing to use.

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