# pass image from javascript to php



## Mr.LLB (May 27, 2008)

hey,

i have a js function that automatically takes values from a form a submits them to a php file via ajax.
this works for normal text fields and drop downs, but

how can i use a file field and have javascript submit that file to php or move the file over to the php file?

thx


----------



## ehymel (Aug 12, 2007)

Not sure I understand.

For the text fields and drop-downs, when you say js submits via ajax, presumably that's just a regular form submit to a php script on the server that processes the form submission. Submitting a file is no different, aside from how you process the file on the back end of course. Can you explain a little more?


----------



## Mr.LLB (May 27, 2008)

hmm maybe I am just confusing myself.

So I have JS that automatically takes data from a form and creates a url out of it and submits via ajax http request to php.
it works fine for normal text fields

will the JS be able to take a file input from the form? if so, how is it going to send the file to php via url?


----------



## ehymel (Aug 12, 2007)

Don't let the ajax part of things confuse you. There is nothing special about ajax from a php point of view. For your question, it's still just an html form that talks to a php script on the back end.

When you say "send the file to php," I'm still not sure what you mean. Are you just trying to let a user upload a file? If so, the php.net documentation page (here) regarding this has good examples. I think you've made it out to be more complicated than it really is.


----------



## Mr.LLB (May 27, 2008)

there are 3 files involved: form, js, php

when i say pass file to php mens the js takes the input field values from the form and passes them onto the php file using the post method

my problem is that when a FILE field value is passed to php via js, i cannot call the image with $_FILES['Picture']['name'];

if i do, echo $_POST['Picture']; < echos the file name. but why not the above method?


----------



## Mr.LLB (May 27, 2008)

heres the js function that collects form values....mayb theres something wrong here


```
function compileFormData(formName,ajaxFile){
var variables = "";	
	for(i=0; i<document.forms[formName].elements.length; i++)
	{
		var type = document.forms[formName].elements[i].type;
		var tmpname = document.forms[formName].elements[i].name;
			var name = tmpname.replace(" ","_");
		var value = "";

		//get value based on type
		switch(type){
			case "text":
				value = document.forms[formName].elements[i].value;
				break;

			case "radio":
				break;

			case "checkbox": //chkbox must have id with value as name
				value = document.getElementById(name).checked;
				break;

			case "submit":
					name = ""; value = "";
				continue;
				break;

			case "file":
					value = document.forms[formName].elements[i].value;
				break;

			case "password":
				value = MD5(document.forms[formName].elements[i].value);			
				break;
		}

	variables=variables+name+"="+value+"&";
	}
submitData(ajaxFile,variables);	
}
```


----------



## ehymel (Aug 12, 2007)

Mr.LLB said:


> there are 3 files involved: form, js, php
> 
> when i say pass file to php mens the js takes the input field values from the form and passes them onto the php file using the post method


Again, this is nothing more than an html form submission. You happen to be using javascript to gather the information for the form on the client side with javascript, but it's still a form. You happen to be processing on the server with php, but it's still a form submission. I know I keep repeating this, but it's an important point to understand so you don't confuse yourself.



Mr.LLB said:


> my problem is that when a FILE field value is passed to php via js


This means use javascript to build the form fields on the client that then get submitted via POST method.



Mr.LLB said:


> i cannot call the image with $_FILES['Picture']['name'];
> 
> if i do, echo $_POST['Picture']; < echos the file name. but why not the above method?


Unclear what you refer to as "the above method". Have you built the form correctly with the specification? See the php.net link I sent earlier. From that page, notice this quote:



> Note:
> 
> Be sure your file upload form has attribute enctype="multipart/form-data" otherwise the file upload will not work.


----------



## Mr.LLB (May 27, 2008)

i did use the multipart/form-data

when the js collects the form data and sends it to the php file via $_POST, I can echo out POST variables and their values. but when I try to get the file value ($_FILES['Picture']['name']), it returns blank.

js is not used to build the form, the form is html. js merely collects the form values


----------



## ehymel (Aug 12, 2007)

Hmmm. What happens if you dump the contents of $_FILES?


```
var_dump[$_FILES];
```


----------



## Mr.LLB (May 27, 2008)

returns empty


----------



## ehymel (Aug 12, 2007)

Not good. One comment from the php site suggests that when this happens, then perhaps the file size exceeds the max allowed by php. See here. Check the size of the file you are uploading and compare to the php.ini setting of post_max_size. Not sure what else the problem could be.


----------



## Mr.LLB (May 27, 2008)

nope. the file i am uploading is only 53 kb.

arggggggg....javascript........arggggg

lol


----------



## ehymel (Aug 12, 2007)

How about trying without the javascript part? Just make a plain old form with one field, submit, and see what happens. Whether it works or not, it will at least narrow down where the problem lies. 

I looked through your js function... not really clear why you are even using it. The only thing it seems to do is encrypt your password fields in md5; otherwise it does nothing other than pass through to your form. Therefore, it doesn't really seem like it's needed for anything.


----------



## Mr.LLB (May 27, 2008)

without the js....it works

that function is so that form data can be submitted via ajax.


----------



## ehymel (Aug 12, 2007)

OK, I understand now. I use jquery instead of raw javascript for this, so I didn't recognize why you were going this. Life is much much easier in the jquery world... since you use so much javascript, you will absolute love jquery. Very easy to learn and use (start here).

The bad news from some reading I've done this afternoon is that file uploads using ajax is not very straightforward. JQuery does have a forms plugin that supports file uploads (see here) that seems pretty easy to use, but I've not tried it myself.


----------



## Mr.LLB (May 27, 2008)

hmm thx man. 

i'll definitely give jquery a shot.

yea i read some where too that javascript cannot handle files. only text values.

thx for ur help


----------

