JQuery 多部分/数据 Ajax 提交

Question

我正在使用 JQuery 提交表单数据，并将以下内容添加到我的函数中以允许它提交/上传文件：

mimeType:"multipart/form-data",

我在我的HTML表单中调用它：

我在这里调用我的HTML表单：

<form id="form1" method="post" action="/tickets/record?type=<?php echo $_GET["type"]; ?>&seq=<?php echo $_GET["seq"]; ?>" enctype="multipart/form-data" onsubmit="post_form('#form1');">

尝试使用PHP处理附件：

$attachment_array = array();    
foreach($_FILES['ticket_update_files']['name'] as $key => $value) {
    if(!$_FILES['ticket_update_files']['error'][$key]) {

    } 
}

但它无法识别已选择的任何文件。

我的完整jquery函数是：

function post_form(form_id, type, redir_url, loading_modal) {
    type = type || '';
    redir_url = redir_url || '';
    loading_modal = loading_modal || '';

    $( form_id ).submit(function(e) {
        var formObj = $(this);
        var formURL = formObj.attr("action");
        var formData = new FormData(this);

        CheckRequired(e);

        if(loading_modal === '1') { } else {
            LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading');
        }

        $.ajax({
            url : '/section' + formURL,
            type: "POST",
            data : formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success:function(data, textStatus, jqXHR) {
                //alert(type);
                if(type === 'modal') {
                    if(redir_url === '') {
                        LoadModal('/section' + formURL, '');
                    } else {
                        LoadModal('/section' + redir_url, '');
                    }
                } else if(type === 'reload') {
                    if(redir_url === '') {
                        location.reload();
                    } else {
                        OpenPage(redir_url);
                    }
                } else {
                    //close the loading modal
                    if(loading_modal === '1') { } else {
                        CloseModal();
                    }
                    //location.reload();
                    //$("body").html(data);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails
            }
        });
        return false;
        e.preventDefault();
    });
}

- charlie

---

看看这个问题，也许可以帮到你。看看正确的答案，他是如何构建AJAX的。 - matiaslauriti

Answer 1

使用这个功能进行Jquery多部分/form-data提交。

$(document).ready(function (e) {
    $("#formid").on('submit', (function (e) {
        e.preventDefault();
        $("#message").empty();
        $('#loading').show();
        $.ajax({
            url: "ajax_php_villa_file.php", // Url to which the request is send
            type: "POST",             // Type of request to be send, called as method
            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
            contentType: false,       // The content type used when sending data to the server.
            cache: false,             // To unable request pages to be cached
            processData: false,
            beforeSend: function () {
                $('.loader-img').show();
            },     // To send DOMDocument or non processed data file it is set to false
            success: function (data)   // A function to be called if request succeeds
            {
                $('.loader-img').hide();
                if (data.trim() != "")
                    $("#imresss").html(data);
            }
        });
    }));
});

- Soyab Badi

Answer 2

尝试手动将每个文件添加到FormData对象中。以下是方法。

HTML：

<form id="my_form" method="post" action="" enctype="multipart/form-data">
    <input type="file" id="my_files" multiple>
    <input type="submit">
</form>

js：

$( "#my_form" ).submit(function(e) {
    e.preventDefault();
    var data = new FormData();
    $.each( $('#my_files')[0].files, function(i, file) {
        data.append('file[]', file);
    });
    $.ajax({
        url: 'http://162.243.221.224/multipart/upload.php', // I will keep this script alive for few weeks
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        // mimeType:"multipart/form-data",
        type: 'POST',
        dataType: "text",
        success: function(data){
            alert(data);
        },
        error: function(data){
            alert(data);
        }
  });
    return false;        
});

PHP：

<?php
    print_r( $_FILES['file']['name'] ); 

我已经在最新的Firefox 47.0浏览器中进行了测试，使用了最新版本的jquery。对我来说有效（在ajax中未指定mimeType和form标签中的action属性）。

- elshnkhll

Answer 3

这就是如何做到的：

function post_form(form_id, type, redir_url, loading_modal) {
    type = type || '';
    redir_url = redir_url || '';
    loading_modal = loading_modal || '';

    $( form_id ).submit(function(e) {
        var formObj = $(this);
        var formURL = formObj.attr("action");
        var formData = new FormData;
        //File Field
        var regexp = /^[^[\]]+/,
            fileInput = $(form_id+' input[type="file"]'), //If form doesn't work try to select the file input by ID here. ex: fileInput = $("#myFileInputHere");
            fileInputName = regexp.exec(fileInput.attr('name'));
            $.each($(fileInput)[0].files,function(i,file) { 
                formData.append(fileInputName, file); //Add file to form
            });

        CheckRequired(e);

        if(loading_modal === '1') { } else {
            LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading');
        }

        $.ajax({
            url : '/section' + formURL,
            type: "POST",
            data : formData,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data, textStatus, jqXHR) {
                //alert(type);
                if(type === 'modal') {
                    if(redir_url === '') {
                        LoadModal('/section' + formURL, '');
                    } else {
                        LoadModal('/section' + redir_url, '');
                    }
                } else if(type === 'reload') {
                    if(redir_url === '') {
                        location.reload();
                    } else {
                        OpenPage(redir_url);
                    }
                } else {
                    //close the loading modal
                    if(loading_modal === '1') { } else {
                        CloseModal();
                    }
                    //location.reload();
                    //$("body").html(data);
                }
            },
            xhr: function(){
                // get the native XmlHttpRequest object
                var xhr = $.ajaxSettings.xhr() ;
                // set the onprogress event handler
                xhr.upload.onprogress = function(evt){ 
                var perc = Math.round(evt.loaded/evt.total*100);
                console.log(perc+'% Uploading...');
                } ;
                // set the onload event handler
                xhr.upload.onload = function(){ 
                console.log('Uploaded!');
                 } ;
                // return the customized object
                return xhr ;
                } ,
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails
            }
        });
        return false;
        e.preventDefault();
    });
}

- TextNinja.Me Free SMS

---

你的解决方案过于复杂，只会通过文件类型输入字段。你可以简单地使用 formData = new FormData(this)（不需要进行任何正则表达式或附加操作），这将传递表单中的所有字段。 - Mikey