...

View Full Version : jquery: how do I serialize file type input in jquery



lauthiamkok
07-23-2010, 03:54 AM
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

santhoshj400
07-23-2010, 06:28 AM
send serialize input value to PHP file using JQuery

var selectedBooks = $('form#book_form').serialize();
alert (selectedBooks);

var url = 'saveBookList.php';

// Send to server using JQuery
$.post(url, {bookArray: selectedBooks},
function(responseData){
$("#save-result").text(responseData);
});

Inside saveBookList.php,

// If you have selected from list box.
if(isset($_POST['bookArray'])){

// Get array or bookID selected by user
$selectedBookId = $_POST['bookArray'];
echo $selectedBookId;

foreach($selectedBookId as $selectListItem)
{
echo "You sent this -->" . $selectListItem . "\n";

}

}

Hope it helps
Thanks & Regards

anticlockwise
07-23-2010, 10:58 AM
This is not a failure in jQuery, it's just that file input is different. Take a look at AJAX file uploading should help.

lauthiamkok
07-23-2010, 11:26 PM
thanks guys. just got it sorted with plug in below!

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

http://www.web-development-blog.com/archives/jquery-form-plugin-and-php-file-uploads/

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum