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

Question

我正在嘗試使用AJAX單獨上傳文件以及其他表單數據。 在這里，我正在關注這個 bootstrap和jquery插件。

我可以在不上傳文件的情況下弄清楚它，但是我想用表單上傳文件。

這是我嘗試的方法：

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

更新：這是我的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>

誰能告訴我我哪里出問題了。 任何幫助將不勝感激。

謝謝。

Answer 1

我認為您的formData為空。 嘗試在發送之前放置以下行：

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

就像他們在這里所做的一樣http://formvalidation.io/examples/ajax-submit/#using-ajax-to-submit-form-data-includes-files