C：\ fakepath \ *。*在Ajax和jQuery中[重复]

Question

This question already has answers here:

                </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>

Answer 1

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
});