Question

我在一个模态中有一个简单的表单，它由jquery生成：

<form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form">
    <div class="form-group">
        <div class="col-sm-5 col-md-5 col-lg-5 text-right" style="padding-top:4px;">
            <label for="ID">ID:</label>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <input type="text" readonly="" id="0" name="ID" placeholder="ID" style="overflow:hidden" class="form-control  form-control-sm" value="4">
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-5 col-md-5 col-lg-5 text-right" style="padding-top:4px;">
            <label for="Név">Név:</label>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <input type="text" id="1" pattern=".*" title="" name="Név" placeholder="Név" data-special="" data-errormsg="" data-unique="false" style="overflow:hidden" class="form-control  form-control-sm" value="Megbeszélés">
            <label id="1label" class="errorLabel" style="display: none;"></label>
        </div>
        <div style="clear:both;"></div>
    </div>

    <div class="form-group">
        <div class="col-sm-5 col-md-5 col-lg-5 text-right" style="padding-top:4px;">
            <label for="Fájl">Fájl:</label>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="input-group"><span class="input-group-btn"><span class="btn btn-file btn-success" id="fileclass7"><input data-url="/fajlok" name="file" type="file" id="fileinput7">Kiválasztás</span></span>
                <input readonly="" placeholder="Fájlnév" class="form-control" type="text" id="fileinput-name7" name="Fájl" data-special="" data-errormsg="" data-unique="false" style="overflow:hidden" value="asd.docx">
                <label id="7label" class="errorLabel"></label>
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>
</form>

我有这个功能，当我点击提交时：

_editRowData : function() {
              var that = this;
              var dt = this.s.dt;

              // Complete new row data
              var rowDataArray = {};

              var adata = dt.rows({
                selected : true
              });

              // Getting the inputs from the edit-modal
              $('form[name="altEditor-form"] *').filter(':input').each(
                  function(i) {
                    rowDataArray[$(this).attr('id')] = $(this).val();
                  });
                  var request = $.ajax({
                    type: "POST",
                    url: "form_post.php", 
                    data: {rowDataArray},
                    dataType: "html"
                  });

                  request.done(function(res){ //something happens here });
}

当我点击提交时，rowDataArray变量被发送到php文件。在rowDataArray中，我得到了文件的名称，就是全部。我想用它来通过这个AJAX请求上传文件和其他输入字段。我的问题是我不知道，如何更改此代码以使其与我的想法一致。有什么建议吗？

Answer 1

试试这个，

替换你的jquery，如下面的

_editRowData : function() {
    var that = this;
    var dt = this.s.dt;

    var data = new FormData();  
    // Collecting all input data
    var form_data = $('#altEditor-form').serializeArray();
    $.each(form_data, function (key, input) {
        data.append(input.name, input.value);
    });
    // Collecting attached files.
    var file_data = $('#altEditor-form input[type=file]')[0].files;
    for (var i = 0; i < file_data.length; i++) {
        data.append("files[]", file_data[i]);
    }

    $.ajax({
        url : "form_post.php", 
        type : "POST",
        processData : false,
        contentType : false,
        data : data,        
        cache : false,           
        success: function(data) {
            // success
        },
        error: function (e) {
            //error
        }
    });
}

在PHP中获取提交的值

<?php
    echo '<pre>';
    var_export($_POST);
    var_export($_FILES);
    echo '</pre>';
    die();
?>

如何在文件和文本输入中使用AJAX？

1 个答案: