SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,048
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    file upload using jQuery

    Hi,

    How would I adapt my code to accomodate a file upload from my form?

    Here's my code

    Code JavaScript:
     
    <script type="text/JavaScript">
    	/* attach a submit handler to the form */
    	$(document).ready(function(){
     
    		$("#contractdiary").submit(function(event){
     
    		/* stop form from submitting normally */
    		event.preventDefault(); 
     
    		/* get some values from elements on the page: */
    		var $form = $(this),
    			AddEvent = $form.find('input[name="addevent"]').val(),
    			EntryType = $form.find('select[name="entry_type"]').val(),
    			Title = $form.find('input[name="title"]').val(),
    			ThisDate = $form.find('input[name="date"]').val(),
    			City = $form.find('input[name="city"]').val(),
    			Postcode = $form.find('input[name="postcode"]').val(),
    			JobRef = $form.find('input[name="job_reference"]').val(),
    			StartDate = $form.find('input[name="start_date"]').val(),
    			EndDate = $form.find('input[name="end_date"]').val(),
    			Rate = $form.find('input[name="rate"]').val(),
    			Employer = $form.find('input[name="employer"]').val(),
    			Notes = $form.find('textarea[name="notes"]').val(),
    			url = $form.attr('action');
     
    		/* Send the data using post and put the results in a div */
    		$.post(url, { 
    			add_event: AddEvent, 
    			entry_type: EntryType,
    			title: Title,
    			date: ThisDate,
    			city: City,
    			postcode: Postcode,
    			job_reference: JobRef,
    			start_date: StartDate,
    			end_date: EndDate,
    			rate: Rate,
    			employer: Employer,
    			notes: Notes,
    			secureuri:false,
    			fileElementId:'doc',
    			dataType: 'json'
    			},
    		  function(data) {
    			  $("#diaryresult").empty().append(data);
    		  }
    		);
    	  });
      });
    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Zaggs View Post
    How would I adapt my code to accomodate a file upload from my form?
    According to api.jquery.com/jQuery.post the manner in which to do that is:

    you just have to set the forms correct encoding type, the size of the post header, and the data blob of your upload encoded in base64
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,048
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    According to api.jquery.com/jQuery.post the manner in which to do that is:
    Hi, I found some ajax code which claims to do what I want. I tried implementing it into my script and lo and behold, it doesn't work! :-)

    Here's the script I am using:
    Code JavaScript:
    <script type="text/JavaScript">
    	/* attach a submit handler to the form */
    	$(document).ready(function(){
     
    		$("#contractdiary").submit(function(event){
     
    		/* stop form from submitting normally */
    		event.preventDefault(); 
     
    		/* get some values from elements on the page: */
    		var $form = $(this),
    			AddEvent = $form.find('input[name="addevent"]').val(),
    			EntryType = $form.find('select[name="entry_type"]').val(),
    			Title = $form.find('input[name="title"]').val(),
    			ThisDate = $form.find('input[name="date"]').val(),
    			City = $form.find('input[name="city"]').val(),
    			Postcode = $form.find('input[name="postcode"]').val(),
    			JobRef = $form.find('input[name="job_reference"]').val(),
    			StartDate = $form.find('input[name="start_date"]').val(),
    			EndDate = $form.find('input[name="end_date"]').val(),
    			Rate = $form.find('input[name="rate"]').val(),
    			Employer = $form.find('input[name="employer"]').val(),
    			Notes = $form.find('textarea[name="notes"]').val();
     
    		/* Send the data using post and put the results in a div */
    		$.post("contract_diary.php", { 
    			add_event: AddEvent, 
    			entry_type: EntryType,
    			title: Title,
    			date: ThisDate,
    			city: City,
    			postcode: Postcode,
    			job_reference: JobRef,
    			start_date: StartDate,
    			end_date: EndDate,
    			rate: Rate,
    			employer: Employer,
    			notes: Notes
    		  },
    		  /*$.ajaxFileUpload(
    		  {
    			  url:'contract_diary.php',
    			  secureuri:false,
    			  fileElementId:'doc',
    			  dataType: 'json',
    			  data:{name:'logan', id:'id'},
    			  success: function (data, status)
    			  {
    				  if(typeof(data.error) != 'undefined')
    				  {
    					  if(data.error != '')
    					  {
    						  alert(data.error);
    					  }
    					  else
    					  {
    						  alert(data.msg);
    					  }
    				   }
    				},
    				error: function (data, status, e)
    				{
    					alert(e);
    				}
    			}
    		),*/
    		function(data) {
    			$("#diaryresult").empty().append(data);
    		});
    		});
    	});
    </script>

    Any help is greatly appreciated :-)

    Thanks.


Bookmarks

Posting Permissions

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