通过AJAX上传文件输入

Question

While filling the form, I want my users to have a preview on what they just selected in the file input field. For this, I'm trying to avoid any kind of plugin or additional software (except for jQuery).

This is what I got, after some internet research:

    $("#file-upload").change(function() {
    var formData = new FormData($("#editForm")[0]);
    $.ajax({
        url: 'script.php',  //Server script to process data
        type: 'POST',
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        //Ajax events
        success: function(output) {
            document.write(output);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        },
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});

The problem with this: formData does not contain any input fields with type="file"!

Any help is appreciated :)

Answer 1

This works for me:

<input type="file" name="browseFile" id="photo" placeholder="File" />
<input id="userId" type="text" />

<input type="submit" value="create request" onclick="CreateRequest(event)" 


<script>
      function CreateRequest(event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;

            var inputFilePhoto = document.getElementById("photo");
            var imageFile = inputFilePhoto.files[0];

            var userId = document.getElementById("userId").value;


            var formData = new FormData();             
            formData.append("RequestPhoto", imageFile);
            formData.append("UserId", userId);

            $.ajax({
                type: "POST",
                url: "/User/CreateRequest",
                data: formData,
                contentType: false,
                processData: false,

                success: function () {
                    alert("OK");
                },
                error: function () {
                    alert("Error");
                }

            });