如何使用FORMDATA为Ajax文件上传 [英] How to use FormData for ajax file upload

问题描述

我没有搞清楚如何做到这一点。我打破我的头从过去的2分，这在后面。

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

 ＆LT;形式方法=POSTID =联系人NAME =13级=形式，水平wpc_contactNOVALIDATE =NOVALIDATEENCTYPE =多部分/形式 - 数据＆GT;
＆LT;字段集＆GT;
    ＆LT; D​​IV ID =传奇级=＆GT;
        ＆LT;传说级=＆GT;文件demoe 1＆LT; /传说＆GT;
        ＆LT; D​​IV ID =警报消息级=警惕隐藏＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

    ＆LT; D​​IV CLASS =控制组＆GT;
        ＆LT;！ - 文字输入 - ＆GT;
        ＆LT;标签类=控制标签为=input01＆gt;文字输入＆LT; /标签＆gt;
        ＆LT; D​​IV CLASS =控制＆GT;
            ＆LT;输入类型=文本占位符=占位级=输入XLARGENAME =名称＆GT;
            ＆其中，P类=帮助块的风格=显示：无;＆GT; TEXT_INPUT＆LT; / P＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =控制组＆GT; ＆LT; / DIV＆GT;
        ＆LT;标签类=控制标签＆GT;文件按钮＆LT; /标签＆gt;

        ＆LT;！ - 文件上传 - ＆GT;
        ＆LT; D​​IV CLASS =控制＆GT;
            ＆LT;输入类=输入文件ID =的FileInput类型=文件名称=文件＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =控制组＆GT;

        ＆LT;！ - 巴顿 - ＆GT;
        ＆LT; D​​IV CLASS =控制＆GT;
            ＆LT;按钮类=BTN BTN-成功＆GT;按钮和LT; /按钮＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /字段集＆GT;
＆LT; /形式GT;
 

在这里，这是我的js code ...

 ＆LT;脚本＆GT;
    $（'。wpc_contact）。递交（函数（事件）{
        VAR窗体名称= $（'。wpc_contact）ATTR（名称）。
        变种形式= $（'wpc_contact。'）序列（）。
        VAR FORMDATA =新FORMDATA（$（形式）[1]）;

        $阿贾克斯（{
            网址：'＆LT; PHP的回声plugins_url（）; ？＆GT;'+'/ WPC-接触形式/资源/ JS / tinymce.php'，
            数据：{form：表单，窗体名称：窗体名称，IPADD：IPADD，FORMDATA：FORMDATA}，
            键入：POST，
            过程数据：假的，
            的contentType：假的，
            成功：功能（数据）{
            警报（数据）;
            }
        }）;
   }
 

解决方案

有关正确的表格数据的使用，你需要做2步。

preparations

您可以给FORMDATA一切形式处理

 变种形式= $（'表'）[0]; //你需要使用非标准JavaScript对象在这里
VAR FORMDATA =新FORMDATA（表）;
 

或指定FORMDATA确切数据。

  VAR FORMDATA =新FORMDATA（）;
formData.append（'节'，'一般'）;
formData.append（'行动'，'previewImg'）;
//主要法宝在这里的文件
formData.append（'形象'，$（'输入[type = file]'）[0] .files [0]）;
 

发送形式

Ajax请求与jQuery将是这样的：

  $。阿贾克斯（{
    网址：在这里你的URL，
    数据：FORMDATA，
    //必须这样做对文件上载
    的contentType：假的，
    过程数据：假的，
    // ......像成功等其他选项
}）
 

在此会喜欢你是enctype =定期提交表单发送Ajax请求的multipart / form-data的

I'm not figuring out how to do this. I'm breaking my head from last 2 hours behind it.

This is my html which I'm generating dynamically using drag and drop functionality.

<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> 

here this is my js code...

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

解决方案

For correct form data usage you need to do 2 steps.

Preparations

You can give to the formData all form for processing

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

or specify exact data for formdata

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

Sending form

Ajax request with jquery will looks like this:

$.ajax({
    url: 'Your url here',
    data: formData,
    // THIS MUST BE DONE FOR FILE UPLOADING
    contentType: false,
    processData: false,
    // ... Other options like success and etc
})

After this it will send ajax request like you submit regular form with enctype="multipart/form-data"

这篇关于如何使用FORMDATA为Ajax文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！