Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    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,

    PHP Code:
    <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,

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

  • #2
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is not a failure in jQuery, it's just that file input is different. Take a look at AJAX file uploading should help.

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    thanks guys. just got it sorted with plug in below!

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

    http://www.web-development-blog.com/...-file-uploads/

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •