File upload using jQuery

JavaScript
1

Hi,

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

Here’s my code



<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

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

3

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! :slight_smile:

Here’s the script I am using:


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

Thanks.