[phasex]

I am trying to get a file from a form in order to send the proper values for $_FILES to PHP using JQuery. Can someone please help? This is what I have

HTML

<form method="POST" id="formID" style="margin:0 auto" enctype="multipart/form-data">    
<label for="uattachment">Attach File <span class="red">*</span></label>
<input type="file" name="file" id="uattachment" value="" />
<input type="submit" name="submit" id="submit">
</form>

$('#formID').submit(function(){
      var file = document.getElementById('uattachment').value;

      if (file.indexOf('/') > -1) file = file.substring(file.lastIndexOf('/') + 1);
	else if (file.indexOf('\\') > -1) file = file.substring(file.lastIndexOf('\\') + 1);

      $.each($('#uattachment').prop("files"), function(i, file) {
	formData.append('file-'+i, file);
      });

     $.ajax({
		   cache: false,
		   async: false,
		dataType: 'JSON',
		    type: 'POST',
		     url: 'b.php',
		    data: formData,
	     
			success: function(data, textStatus, jqXHR){
				
				alert("msg : "+ data.msg);
			},
			
			error: function(jqXHR, error, thrownError){
			
				  if (jqXHR.readyState == 0 || jqXHR.status == 0) {  
					return false; //Skip this error  
				  }else{
					alert("Error : \nReady state = "+ jqXHR.readyState +"\nStatus = "+ jqXHR.status +"\nResponse = "+ jqXHR.responseText);
				  }
			},
			
			complete: function(jqXHR, textStatus){			
				alert("Status : "+ textStatus +"\nStatus desc : "+jqXHR.readyState);
			}
      
});

here is the PHP code

$files = $_FILES['file'];

echo json_encode( array('msg' => $files[0]['name'] ) );

[Atli]

Hey.

Reading file data into Javascript, like you would have to do in order to send the file via AJAX, has only recently been made possible through the HTML5 File API. Browser support for it is still very limited. - The Mozilla docs for the FileReader object has some good info, as well as a browser compatibility table at the bottom.

If that doesn't work for you, you could try using an iframe instead of AJAX. That is, load the form that has the file input inside an iframe, so that when the form is submitted the frame is redirected rather than the main page. It's a little more messy than a nice jQuery AJAX call, but it should work for older browsers.

[phasex]

Thanks Atli!

I'll look into it.

[phasex]

I tried doing the following to test this out

php file (test.php)

 ....
 <?php
 $file = $_POST['file']['name'];
 
 if(isset($file)){
	echo "good";
 }else{
 ?>

 <iframe src="formpage.html"></iframe>

 <?php
      }?>

formpage.html page

<form method="POST" action="test.php" style="margin:0 auto" enctype="multipart/form-data">   
2
<label for="uattachment">Attach File <span class="red">*</span></label>
3
<input type="file" name="file" id="uattachment" value="" />
4
<input type="submit" name="submit" id="submit">
5
</form>

This does not work. Can you please provide a psedocode or example of your concept?

[JackOfAllTrades]

https://www.google.c...ame+file+upload

[phasex]

I do not want to upload the file. I simply need to pass the "files" array to php via ajax.

[Atli]

OK. So you are trying to use the new HTML5 multiple file input element to send the names of a bunch of files to PHP?

First of all. Why? What good are the names of a bunch of files on the client computer to a server-side script? It's not like PHP can access them.

And second. Multiple file inputs are not widely supported yet. Only the latest versions of the standards supporting browsers support them, and no version of IE currently does. (Not sure about IE10.)

However, with that said, here is the basic idea. To begin with, the <input> element will need to have the "multiple" flag set in order for it to accept multiple files, and for the "files" property to be set.

<input type="file" id="fileInput" multiple/>

Once you are ready to collect the file names, you'll have to start by creating a data object that you can send via AJXA, and add an array to that object to hold the file names. - You have part of that in the code you posted, but incorrectly written.

// First, you need an object to hold the data you are
// planing to send to PHP.
var formData = {}

// You also need to create an array to store the file
// names in, inside the form data object.
formData.files = []

// Then you can start adding the names from the input
// into the new array.
$.each($("#fileInput").prop("files"), function(index, file) {
    formData.files.push(file.name);
});

Now the formData object has the file names array, and is ready to be sent to PHP. Your AJAX request is pretty much correct, although I'd remove the async: false property. It makes absolutely no sense to block Javascript while you're waiting for AJAX to return.

In the PHP script, the list would be available as $_POST["files"]. For instance:

$_POST = Array
(
    [files] => Array
        (
            [0] => Image1.jpg
            [1] => Image2.jpg
            [2] => Image3.jpg
        )

)