如何使用FormData上载Ajax文件

Question

如何使用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>这是我的js密码.。<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);              }         });    }

Answer 1

要正确使用表单数据，您需要执行两个步骤。

制剂

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

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

或为FormData()指定确切数据

var formData = new FormData();formData.append('section', 'general');formData.append('action', 'previewImg');
// Attach fileformData.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开始

Answer 2

我不能在上面加上评论，因为我没有足够的声誉，但是上面的回答对我来说几乎是完美的，但我不得不补充

类型：“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})