Search code examples
javascriptweb-servicesform-data

add image in formdata and use in webservice javascript

I am creating a web app in which I want to add images i am using javascript and FormData() to send images in webservice but when i debug my form data is not showing any data

here is my code

var data = new FormData();
var ClientImage = $("#fl_ClientImage").get(0).files;
if (ClientImage.length > 0) {
  data.append("ClientImage", ClientImage[0]);
}
console.log(data);

enter image description here

what can be the possible error here?

Solution 

  • $(document).ready(function (e) {
			$("#uploadimage").on('submit',(function(e) {
			e.preventDefault();
				$.ajax({
				url: "upload.php", // Url to which the request is send
				type: "POST",             // Type of request to be send, called as method
				data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
				contentType: false,       // The content type used when sending data to the server.
				cache: false,             // To unable request pages to be cached
				processData:false,        // To send DOMDocument or non processed data file it is set to false
				success: function(data)   // A function to be called if request succeeds
				{
					console.log("data ",data);
				}
				});
			}));

});
    <form id="uploadimage" action="" method="post" enctype="multipart/form-data">

<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    I am using php to get image values.

    <?php echo "<pre>";print_r($_FILES);die; ?>