</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/166221/how-can-i-upload-files-asynchronously" dir="ltr">How can I upload files asynchronously?</a>
<span class="question-originals-answer-count">
(34 answers)
</span>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/298745/how-do-i-send-a-cross-domain-post-request-via-javascript" dir="ltr">How do I send a cross-domain POST request via JavaScript?</a>
<span class="question-originals-answer-count">
(17 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2014-03-13 15:33:44Z" class="relativetime">6 years ago</span>.</div>
</div>
</aside>
I am trying to get a document to be able to pass through some AJAX and jQuery and I just keep getting the C:\fakepath\ when attempting to pass it through. I know this is a security feature within browsers, but I haven't found a way to get past it, so that it passes the doc.
Here's my code, and jsfiddle.
<form method="post" action="contact.php" name="contactform" id="contactform" enctype="multipart/form-data">
<label for="email" accesskey="E"><span class="required">*</span> FBN Document</label>
<input name="fbndoc" type="file" id="fbndoc" size="30" value="" />
jQuery(document).ready(function () {
$('#contactform').submit(function () {
var action = $(this).attr('action');
var values = $.map($('[name^="attribute"]'), function (elem) {
return {
name: elem.name,
value: elem.value
};
});
$("#message").slideUp(750, function () {
$('#message').hide();
$('#submit')
.after('<img src="assets/ajax-loader.gif" class="loader" />')
.attr('disabled', 'disabled');
$.post(action, {
firstname: $('#firstname').val(),
lastname: $('#lastname').val(),
email: $('#email').val(),
contactphone: $('#contactphone').val(),
values: $('values').val(),
fbn: $('#fbn').val(),
fbns: values,
fbnnumber: $('#fbnnumber').val(),
fbnaddress: $('#fbnaddress').val(),
fbncity: $('#fbncity').val(),
fbnstate: $('#fbnstate').val(),
fbnzip: $('#fbnzip').val(),
owneraddress: $('#owneraddress').val(),
ownercity: $('#ownercity').val(),
ownerstate: $('#ownerstate').val(),
ownerzip: $('#ownerzip').val(),
businesstype: $('#businesstype').val(),
otherField: $('#otherField').val(),
commencedate: $('#commencedate').val(),
fbndoc: $('#fbndoc').val(),
comments: $('#comments').val(),
form_type: $('#form_type').val(),
verify: $('#verify').val()
},
function (data) {
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#contactform img.loader').fadeOut('slow', function () {
$(this).remove()
});
$('#submit').removeAttr('disabled');
if (data.match('success') != null) $('#contactform').slideUp('slow');
});
});
return false;
});
});
jsfiddle can be found here: http://jsfiddle.net/g29wQ/
</div>
You are sending by ajax filename, not it content:
fbndoc: $('#fbndoc').val()
If you want to upload file with it content by ajax better use FormData, for example with jQuery:
var fd = new FormData($('#fbndoc').get(0));
fd.append("CustomField", "This is some extra data");//add all you data here like this
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
});