如何使用 FormData 进行 AJAX 文件上传?

IT技术 javascript jquery ajax file-upload
2021-01-15 23:53:23

这是我使用拖放功能动态生成的 HTML。

<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
    <div id="legend" class="">
        <legend class="">file demoe 1</legend>
        <div id="alert-message" class="alert hidden"></div>
    </div>

    <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
            <input type="text" placeholder="placeholder" class="input-xlarge" name="name">
            <p class="help-block" style="display:none;">text_input</p>
        </div>
        <div class="control-group">  </div>
        <label class="control-label">File Button</label>

        <!-- File Upload --> 
        <div class="controls">
            <input class="input-file" id="fileInput" type="file" name="file">
        </div>
    </div>
    <div class="control-group">    

        <!-- Button --> 
        <div class="controls">
            <button class="btn btn-success">Button</button>
        </div>
    </div>
</fieldset>
</form> 

这是我的 JavaScript 代码:

<script>
    $('.wpc_contact').submit(function(event){
        var formname = $('.wpc_contact').attr('name');
        var form = $('.wpc_contact').serialize();               
        var FormData = new FormData($(form)[1]);

        $.ajax({
            url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
            data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
            type : 'POST',
            processData: false,
            contentType: false,
            success : function(data){
            alert(data); 
            }
        });
   }
6个回答

为了正确使用表单数据,您需要执行 2 个步骤。

准备工作

您可以将整个表单交给 FormData() 进行处理

var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

或为 FormData() 指定确切的数据

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]); 

发送表格

使用 jquery 的 Ajax 请求将如下所示:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});

在此之后,它将发送 ajax 请求,就像您提交常规表单一样 enctype="multipart/form-data"

更新:如果没有type:"POST"选项,此请求将无法工作,因为所有文件都必须通过 POST 请求发送。

注意: contentType: false仅从jQuery 1.6 开始可用

@Spell 如何在控制器中获取数据?需要寄getCsrfToken吗?
2021-03-15 23:53:23
@ЮрийСветлов 这取决于您使用的控制器类型。它是服务器端还是前端控制器?你想在这里解决 CSRF 保护吗?
2021-03-17 23:53:23
@ManthanJamdagni 当你得到时$('form'),它会返回 jQuery 对象。但是我们在这里需要没有 jQuery 功能的常规 js 对象。这就是为什么我们得到带有[0]符号的常规对象您可以调用document.getElementById()或模拟调用来代替这种结构
2021-03-20 23:53:23
我可以在 Ajax 调用中设置“enctype”吗?我想我可能有问题。或者,我可以在 FormData 对象上设置它吗?
2021-03-26 23:53:23
你可以。为此,请参阅我的代码中的 THIS MUST BE DONE FOR FILE UPLOADING 之后的行。
2021-03-31 23:53:23

我无法在上面添加评论,因为我没有足够的声誉,但上面的答案对我来说几乎是完美的,除了我不得不添加

类型:“POST”

到 .ajax 调用。我挠了几分钟,试图弄清楚我做错了什么,这就是它所需要的,而且效果很好。所以这是整个片段:

完全归功于我上面的答案,这只是对此的一个小调整。这是以防万一其他人被卡住并且看不到明显的东西。

  $.ajax({
    url: 'Your url here',
    data: formData,
    type: "POST", //ADDED THIS LINE
    // THIS MUST BE DONE FOR FILE UPLOADING
    contentType: false,
    processData: false,
    // ... Other options like success and etc
})
<form id="upload_form" enctype="multipart/form-data">

jQuery 与 CodeIgniter 文件上传:

var formData = new FormData($('#upload_form')[0]);

formData.append('tax_file', $('input[type=file]')[0].files[0]);

$.ajax({
    type: "POST",
    url: base_url + "member/upload/",
    data: formData,
    //use contentType, processData for sure.
    contentType: false,
    processData: false,
    beforeSend: function() {
        $('.modal .ajax_data').prepend('<img src="' +
            base_url +
            '"asset/images/ajax-loader.gif" />');
        //$(".modal .ajax_data").html("<pre>Hold on...</pre>");
        $(".modal").modal("show");
    },
    success: function(msg) {
        $(".modal .ajax_data").html("<pre>" + msg +
            "</pre>");
        $('#close').hide();
    },
    error: function() {
        $(".modal .ajax_data").html(
            "<pre>Sorry! Couldn't process your request.</pre>"
        ); // 
        $('#done').hide();
    }
});

您可以使用。

var form = $('form')[0]; 
var formData = new FormData(form);     
formData.append('tax_file', $('input[type=file]')[0].files[0]);

或者

var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]); 

两者都会起作用。

如果我们得到带有 id 的 dom,为什么我们需要像 $(#formId)[0] 那样输入 0 零?
2021-03-18 23:53:23
$(document).ready(function () {
    $(".submit_btn").click(function (event) {
        event.preventDefault();
        var form = $('#fileUploadForm')[0];
        var data = new FormData(form);
        data.append("CustomField", "This is some extra data, testing");
        $("#btnSubmit").prop("disabled", true);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "upload.php",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {
                console.log();
            },
        });
    });
});
$('#form-withdraw').submit(function(event) {

    //prevent the form from submitting by default
    event.preventDefault();



    var formData = new FormData($(this)[0]);

    $.ajax({
        url: 'function/ajax/topup.php',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
          if(returndata == 'success')
          {
            swal({
              title: "Great",
              text: "Your Form has Been Transfer, We will comfirm the amount you reload in 3 hours",
              type: "success",
              showCancelButton: false,
              confirmButtonColor: "#DD6B55",
              confirmButtonText: "OK",
              closeOnConfirm: false
            },
            function(){
              window.location.href = '/transaction.php';
            });
          }

          else if(returndata == 'Offline')
          {
              sweetAlert("Offline", "Please use other payment method", "error");
          }
        }
    });



});