1

I want to upload image and text field value when press the enter key without page loading effect. it showing an error message for TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

Here is my code can any one help https://jsfiddle.net/rijo/sx73rwe5/

php code 

<?php
if(isset($_FILES["file"]["type"]))
{
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")) && ($_FILES["file"]["size"] < 10000000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
}
else
{
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
}
else
{
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
}
}
}
else
{
echo "<span id='invalid'>***Invalid file Size or Type***<span>";
}
}
?>
Rijo
  • 2,963
  • 5
  • 35
  • 62
  • Possible duplicate of [Ajax Upload image](http://stackoverflow.com/questions/19447435/ajax-upload-image) – Abdulla Nilam Feb 21 '17 at 06:41
  • I can upload image via press submit button but i can't upload via press enter key – Rijo Feb 21 '17 at 06:43
  • You should properly indent your code. In it's current state, it's hard to read. You should also post all the relevant code in the question, not as links to external sites. – M. Eriksson Feb 21 '17 at 06:44

1 Answers1

3

By definition :https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

To construct a FormData object that contains the data from an existing <form>, specify that form element when creating the FormData object.

You are passing this to the formData which is the target obj of the keypress event in your case $('#test_name'). You need to pass the form DOM element:

new FormData($("#uploadimage")[0]);
KAD
  • 10,972
  • 4
  • 31
  • 73
  • ya bro, it's working fine thanks . $("#uploadimage")[0] here '0' means passing first field value right? – Rijo Feb 21 '17 at 06:51
  • You're welcome, `[0]` is the place where jquery saves the DOM element of the selected object in case a single element is returned in the list of selections. – KAD Feb 21 '17 at 06:52