$.ajax 不使用数据上传文件：对象数组方法答案

【问题标题】：$.ajax not uploading files using data: object array method$.ajax 不使用数据上传文件：对象数组方法
【发布时间】：2017-09-26 13:34:52
【问题描述】：

我在 Stack Overflow 上到处搜索，找不到与我的问题接近的解决方案或帖子。

所以如果在我道歉之前已经发布了。

我正在使用不同的方法发布一些信息，而不是发布我将在向您展示代码后解释的表单:)

jquery：

    $("#submit-add-cpos").on('click',function(){

    var checkHowManyInstallments = $('#installment-ammount').val();
                var checkCpoNumber = $('#addcponumber').val();
                var checkCpoTotalPrice = $('#addcpoprice').val();
                var checkCpoContactName = $('#addcpocontactname').val();

                var form_data = new FormData();

                form_data.append("type", 'addcpo');
                form_data.append("quoteid", '<?php echo $_GET['id']; ?>');
                form_data.append("installmentamount", checkHowManyInstallments);
                form_data.append("cponumber", checkCpoNumber);
                form_data.append("costcode", '<?php echo $quotecostcode; ?>');
                form_data.append("cpocontactname", checkCpoContactName);
                form_data.append("cpotitle", '<?php echo $quotetitle; ?>');

                var checkDynamicValues = '';
                var checkDynamicValue1 = '';
                var checkDynamicValue2 = '';
                var checkmakename1 = '';
                var checkmakename2 = '';
                if(checkHowManyInstallments != 'undefined' && checkHowManyInstallments != '' && checkHowManyInstallments != 0){

                    for(var makingi = 1; makingi <= checkHowManyInstallments; makingi++){

                        checkDynamicValue1 = $('#cpo-adddate-' + makingi).val();
                        checkDynamicValue2 = $('#cpo-addprice-' + makingi).val();

                        form_data.append('cposadddate' + makingi, checkDynamicValue1);
                        form_data.append('cposaddvalue' + makingi, checkDynamicValue2);

                    }

                }

                $.ajax({
                    url: '/Applications/Controllers/Quotes/ajax-add-sin.php',
                    dataType: 'script',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data, // Setting the data attribute of ajax with file_data
                    type: 'post',
                    success: function(data) {
                    $('body').html(data);
                    }
                });

});

所以我从这个脚本中获取了表单中的所有字段，包括一些动态字段。

我这样做而不是更简单的方法的原因：

$("#formname").on('submit',function(){

    $.ajax({
        url: "xxxxxxxxxx/xxxxx/xxxx/xxxx.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(data){

        }           
    });

});

是因为由于某种原因无论我尝试什么都找不到发布的信息，所以我能做到的唯一方法就是找到每个 id 并从中获取值。

现在的问题是，上传文件，您不能简单地以这种方式上传文件，因为没有发布任何内容。

如果不发布表单，我将如何上传文件？

谢谢

【问题讨论】：

标签： javascript jquery ajax forms file-upload

【解决方案1】：

它没有发布文件的原因仅仅是因为我没有给它一个文件来发布......

18 小时的连续工作在这里与我不符。

基本上我需要添加以下代码

var checkCpoFiles = $("#addcpofile").prop("files")[0];
form_data.append("cpofile", checkCpoFiles);

现在一切正常

【讨论】：

【解决方案2】：

请浏览此页面Ajax Upload image

这是示例代码，它可能会有所帮助

<html>
    <head>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    </head>
<body>

    <form enctype="multipart/form-data" action="uploadfile.php" method="POST" id="imageUploadForm">

        <input type="file" name="upload" />
        <input type="submit"/>

    </form>

</body>
<script>
$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));
});
</script>

上传文件.php

<?php

if(move_uploaded_file($_FILES['upload']['tmp_name'],$_FILES['upload']['name'])) {

    echo "File uploaded successfully";

} else {

    echo "Unable to upload the file";

}
?>

希望对您有所帮助！万事如意！

【讨论】：