1 Replies - 4035 Views - Last Post: 15 September 2011 - 09:49 PM Rate Topic: -----

#1 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,278
  • Joined: 01-June 09

Validation of Image with PHP and jQuery/Ajax

Posted 15 September 2011 - 06:09 PM

Just wondering how I can go about doing this. I know this could potentially be mainly a Javascript question, but for the time being I don't know if PHP is the better route. So I'm just posting it here.

I have a form and one of the options in the form is to select a picture to upload (not required though). I want to validate this form with Javascript before I let the PHP handle the form. To do this I want to make sure that this image is actually valid, it doesn't already exist, etc.

Is there a way to do this with pure Javascript or do I have to send this image on to a separate PHP file via an ajax function (I'd really like to do it with pure Javascript/jQuery/etc)?

So here's my form:
<form method='post' action='new_createGroups.php' id="createForm" onsubmit ="return valCreateGroupForm();" enctype="multipart/form-data">
					<label for="groupName" class="label">Name:</label>
					<input type="text" name="groupName" maxlength="250" id="groupName" class="createGroupInputs" /><br/>
					<p class="createGroupError noName">{{ERROR}}</p>
					<label for="groupDescription" class="label">Description:</label>
					<textarea type="text" class="createGroupInputs" name="groupDescription" disabled="true" id="groupDescription" maxlength="750">{{ENTERED_TEXT}}</textarea><br/>
					<label for="typeDropDown" class="label">Type:</label>
					<select name="typeDropDown" disabled="true" id="groupTypeDrop">
						<option value="Private">Private</option>
						<option value="Open">Open</option>
					<label for="image" class="label">Group Photo:</label>
					<input type="file" name="image" id="imageField" class="photoButton" disabled="true">
					<p class="createGroupError wrongType">{{PIC_ERROR}}</p>
					<input class="createGroupButton" id="createGroupButton" type='submit'  value='CREATE MY GROUP' disabled="true">

You can see at the top I use the onsubmit event which calls this (obviously this is not finished yet because this is really what my question is about):
function valCreateGroupForm()
return false;

Now when I choose a file to upload, and the click Submit for the form, an alert comes up saying something like:
^This is what's really throwing me off. I just don't know what to do with this and why it's showing "fakepath".

Now, can I use this? How? As mentioned above I'd like to do it in pure jQuery, but will use PHP if I have to.

If I have to use PHP, how do I get the actual file name out of it? The path is "tampered" with it seems so I'm not sure how to react to this.

Thanks for the help!

This post has been edited by eZACKe: 15 September 2011 - 06:15 PM

Is This A Good Question/Topic? 0
  • +

Replies To: Validation of Image with PHP and jQuery/Ajax

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5207
  • View blog
  • Posts: 13,953
  • Joined: 18-April 07

Re: Validation of Image with PHP and jQuery/Ajax

Posted 15 September 2011 - 09:49 PM

Well javascript is really restricted when it comes to file form fields and accessing file information on the computer (for security reasons). So I don't think you can check (in a cross platform uniform way) if a file is legit using only Javascript.

You can, using PHP via an AJAX call, pass the name of the file they have specified to the server and have PHP check if there is a file with that name already uploaded. If so report back to the javascript and abort the upload.

You can of course just let PHP check if a file was specified and if it has a size etc upon upload. Validate it server side.

But as for having a pure javascript implementation... I don't believe you can due to the security restrictions surrounding that particular form control.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1