如何使用FormData AJAX文件上传?

这是我的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); 
            }
        });
   }

当前回答

实际上，文档显示您可以使用XMLHttpRequest().send() 简单地发送多种形式的数据以防jquery很烂

2017-07-29 19:19:17

其他回答

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

2019-09-17 10:55:32

为了正确使用表单数据，您需要执行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"

更新:此请求不能在选项中没有类型:“POST”，因为所有文件都必须通过POST请求发送。

注意:contentType: false仅在jQuery 1.6以后可用

2014-01-10 13:00:34

最好使用本地javascript通过id查找元素，如:document.getElementById("yourFormElementID")。

$.ajax( {
      url: "http://yourlocationtopost/",
      type: 'POST',
      data: new FormData(document.getElementById("yourFormElementID")),
      processData: false,
      contentType: false
    } ).done(function(d) {
           console.log('done');
    });

2020-01-10 03:04:14

早上好。

我有同样的问题，上传多个图像。解决方案比我想象的更简单:在名称字段中包含[]。

<input type="file" name="files[]" multiple>

我没有对FormData做任何修改。

2019-04-24 15:14:39

实际上，文档显示您可以使用XMLHttpRequest().send() 简单地发送多种形式的数据以防jquery很烂

2017-07-29 19:19:17

如何使用FormData AJAX文件上传?

推荐文章

最新文章

标签