Error while sending image through ajax to WCF
- by Samar Rizvi
Here is my form:
<form id="register" enctype="multipart/form-data">
<input type="text" name="first_name" placeholder="First Name" id="first_name" />
<input type="text" name="last_name" placeholder="Last Name" id="last_name" />
<input type="text" name="input_email" placeholder="Confirm your email" id="input_email" class="loginEmail" />
<input type="password" name="input_password" placeholder="Password" id="input_password" class="loginPassword" />
<input type="password" name="repeat_password" placeholder="Repeat password" id="repeat_password" class="loginPassword" />
<input type="file" name="image_file" id="image_file" />
<div class="logControl">
<div class="memory"></div>
<input type="submit" name="submit" value="Register" class="buttonM bBlue" id="register_submit"/>
<div class="clear"></div>
</div>
<p><h3>Or click <a href="login.html">here</a> to login</h3></p>
</form>
Here is jquery call that I make:
function WCFJSON() {
$(".memory").html('<img src="images/elements/loaders/7s.gif" />');
Data = new FormData($('form')[0]);
$.ajax({
type: 'POST', //GET or POST or PUT or DELETE verb
url: "WCFService/Service.svc/Register", // Location of the service
data: Data, //Data sent to server
async:false,
cache:false,
contentType: false, // content type sent to server
dataType: DataType, //Expected data format from server
processdata: false, //True or False
success: function(msg) {//On Successfull service call
...
},
error: ...// When Service call fails
});
}
$(document).ready(function(){
$("#register").submit(function(){
$('#input_password').val(CryptoJS.MD5($('#input_password').val()));
$('#repeat_password').val(CryptoJS.MD5($('#repeat_password').val()));
WCFJSON();
return false;
});
});
Now when I submit the form , page refreshes with get elements in the url. But if I remove the file input from the form, jquery works fine.
