如何使用jquery和ajax上传文件？

Question

I am trying to upload a file alone with other form data using AJAX. Here I am following this bootstrap and jquery plugin.

I can figure it out without file uploading, But I want to upload a file with my form.

This is how I tried it:

.on('success.form.fv', function(e) {
    // Save the form data via an Ajax request
    e.preventDefault();

    var $form    = $(e.target),
        formData = new FormData(),
        params   = $form.serializeArray(),
        files    = $form.find('[name="new_product_image"]')[0].files,     
        id       = $form.find('[name="product_id"]').val();

    // The url and method might be different in your application
    $.ajax({
        url: './includes/process_edit_products.php',
        method: 'POST',
        //data: $form.serialize()
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
    }).success(function(response) {
        response = jQuery.parseJSON(response);
        // Get the cells
        var $button = $('button[data-id="' + response.product_id + '"]'),
            $tr     = $button.closest('tr'),
            $cells  = $tr.find('td');

        // Update the cell data
        $cells
            .eq(0).html(response.product_name).end()
            .eq(1).html(response.price).end()
            .eq(2).html(response.product_des).end();

        // Hide the dialog
        $form.parents('.bootbox').modal('hide');

        // You can inform the user that the data is updated successfully
        // by highlighting the row or showing a message box
        bootbox.alert('The product is updated successfully.');
    });
});

UPDATE: This is my HTML:

<form id="userForm" method="post" class="form-horizontal" enctype="multipart/form-data" style="display: none;">
    <div class="form-group">
        <label class="control-label" style="width:32%;">ID</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="product_id" readonly />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" style="width:32%;">Product Name:</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="product_name" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" style="width:32%;">Product Price</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="product_price" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" style="width:32%;">Product Description</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="product_des" />
        </div>
    </div>
        <div class="form-group">
            <label class="control-label" style="width:32%;">New Product Image:</label>
            <div class="col-xs-5">
                <input type="file" size="32" name="new_product_image">
                <p class="help-block">*Only for jpg, gif and PNG files.</p>
            </div>
        </div>  

    <div class="form-group">
            <div class="col-xs-5 col-xs-offset-4">
                <button type="submit" class="btn btn-primary">Update Product</button>
            </div>
    </div>
</form>

Can anybody tell me where I have gone wrong. Any help would be greatly appreciating.

Thank you.

Answer 1

I think your formData is empty. Try to put these lines before send:

$.each(files, function(i, file) {
  // Prefix the name of uploaded files with "uploadedFiles-"
  // Of course, you can change it to any string
  formData.append('uploadedFiles-' + i, file);
});

$.each(params, function(i, val) {
  formData.append(val.name, val.value);
});

Like they did here http://formvalidation.io/examples/ajax-submit/#using-ajax-to-submit-form-data-including-files