2 Replies - 326 Views - Last Post: 19 October 2016 - 02:55 PM

#1 Salient   User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 53
  • Joined: 23-August 16

Ajax pass an uploaded file to php?

Posted 17 October 2016 - 02:50 PM

Have been checking the web for a tut but they all seem a lot more complex than I want

Basically have an input file in a form

	<label for="fileToUpload">Select Flag:</label><br />
        <input type="file" name="fileToUpload" id="fileToUpload" />



And I then want to send it to a background php file to do the regular save away thing

		// Check File type is happening  correctly
		$allowed_file_types = array('.jpg','.jepg','.gif','.png');
		
		if (in_array($fext,$allowed_file_types) && ($filesize < 200000)) {
			
			// New File Name
			$cntyFlag = $target_dir.$cntyId.$fext;
			$countryFlag = strtolower($cntyId).$fext;
			
			// Does the File Name already exist
			if (file_exists($target_dir . $cntyFlag)) {
				echo "Sorry the Flag already Exits";
				$conn = null;
				return;
			} else {
				move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $cntyFlag);
			}
		}



Ajax example for another form

function editGroup() {
	
	_("status").innerHTML = 'Please wait ...';
	_("save").disabled    = true;
	
	/* Check Data is Correct Else Error Out */
	var val = _("groupname").value;
	if (val == null || val === "") {
		_("status").innerHTML = 'Group Name is Required!';
		_("save").disabled = false;
		return; // stop function execution
	}

	// Use AJAX to call php MySQL save routine
	var formdata = new FormData();
	formdata.append("groupid", _("groupid").value);
	formdata.append("groupname", _("groupname").value);
	
	var ajax = new XMLHttpRequest();
	ajax.open("POST", "acp_system.php?opt=grp_mod_save");
	ajax.onreadystatechange = function() {
		if(ajax.readyState == 4 && ajax.status == 200) {
			if(ajax.responseText == "success") {
				_("settings").innerHTML = '<h2>Group Successfully Edited</h2><p>Check to ensure Group is now rocking</p><a href="acp_index.php">Click to Exit</a>';
			} else {
				_("status").innerHTML = ajax.responseText;
			}
		}
	}
	ajax.send(formdata);
}



So kind of want to know how to extract the file from the form and pass to PHP for normal processing.

Hopefully that makes some sense.

Is This A Good Question/Topic? 0
  • +

Replies To: Ajax pass an uploaded file to php?

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Ajax pass an uploaded file to php?

Posted 17 October 2016 - 02:59 PM

You can append the file to a FormData object:

https://developer.mo...FormData/append

The file input element has a property called files with an array of files ready to upload. You can pass each file in that array to the FormData object like they show in the examples there.
Was This Post Helpful? 1
  • +
  • -

#3 Salient   User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 53
  • Joined: 23-August 16

Re: Ajax pass an uploaded file to php?

Posted 19 October 2016 - 02:55 PM

Finally wrestled this croc into submission with your help and a couple of examples I stumbled onto :bananaman:

Might be a better approach, but this one is working and need to forge ahead to the next problem

	var fileInput = _('fileToUpload');
	var inputFile = fileInput.files[0];
	formdata.append('countryflag', inputFile);


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1