Question

当我们不使用SSL时，带有ajax的文件上传工作正常，但是当我们这样做时失败。也就是说，在我们的开发服务器（没有SSL）上，以下工作。在我们投入SSL之前，它在生产方面也很好。

我们的服务器基础架构（在机架空间）现在在负载均衡器上具有SSL终止，以便会话可以与其中一个Web服务器挂钩。我们还使用.htaccess来检查{HTTP：X-Forwarded-Proto}并强制使用HTTPS。如果我们删除强制SSL的.htaccess并使用HTTP发出以下请求，它就可以工作。将.htaccess恢复到位后，除文件上传部分外，其他所有内容仍能正常工作。所有其他ajax调用都很好，表单构建和按钮工作......

这里是.htaccess文件：

RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^.*$ https://%{HTTP_HOST}%{REQUEST_URI}

js / widget-groups.js构建模式表单以创建或更新组的详细信息，包括组徽标的文件上载。它基于UserFrosting，表格并不特别有趣。相关位是：

    /* Display a modal form for updating/creating a group */
function groupForm(box_id, group_id) {
    group_id = typeof group_id !== 'undefined' ? group_id : "";

    // Delete any existing instance of the form with the same name
    if($('#' + box_id).length ) {
        $('#' + box_id).remove();
    }

    var data = {
        box_id: box_id,
        render_mode: 'modal'
    };

    if (group_id != "") {
        console.log("Update mode");
        data['group_id'] = group_id;
        data['show_dates'] = true;
    }

    // Generate the form
    $.ajax({
      type: "GET",
      url: "load_form_group.php",
      data: data,
      dataType: 'json',
      cache: false
    })
    .fail(function(result) {
        addAlert("danger", "Oops, looks like our server might have goofed.  If you're an admin, please check the PHP error logs.");
        alertWidget('display-alerts');
    })
    .done(function(result) {
        // Append the form as a modal dialog to the body
        $( "body" ).append(result['data']);
        $('#' + box_id).modal('show');

        // Link submission buttons
        $('#' + box_id + ' form').submit(function(e){
            var errorMessages = validateFormFields(box_id);
console.log("in widget Link submission buttons");
            var myFileList = document.getElementById('image_url').files;
            myFileList = typeof myFileList !== 'undefined' ? myFileList : false;
console.log(myFileList);
/*
            var myFile = myFileList[0];
console.log(myFile);
console.log("filename="+myFile.name+",size="+myFile.size+",type="+myFile.type);
*/

            if (errorMessages.length > 0) {
                $('#' + box_id + ' .dialog-alert').html("");
                $.each(errorMessages, function (idx, msg) {
                    $('#' + box_id + ' .dialog-alert').append("<div class='alert alert-danger'>" + msg + "</div>");
                });
            } else {
                if (group_id != "") {
                    updateGroup(myFileList,box_id, group_id);
                    } else {
                    createGroup(myFileList,box_id);
                    }
            }

            e.preventDefault();
        });
    });
    }

当用户点击按钮时，调用updateGroup：

// Update group with specified data from the dialog
function updateGroup(myFileList,dialog_id, group_id) {
var data = {
    group_id: group_id,
    display_name: $('#' + dialog_id + ' input[name="display_name"]' ).val(),
    group_logo: $('#' + dialog_id + ' input[name="group_logo"]' ).val(),
    csrf_token: $('#' + dialog_id + ' input[name="csrf_token"]' ).val(),
    compAddr1: $('#' + dialog_id + ' input[name="compAddr1"]' ).val(),
    compAddr2: $('#' + dialog_id + ' input[name="compAddr2"]' ).val(),
    compAddr3: $('#' + dialog_id + ' input[name="compAddr3"]' ).val(),
    compCity: $('#' + dialog_id + ' input[name="compCity"]' ).val(),
    compSt: $('#' + dialog_id + ' input[name="compSt"]' ).val(),
    compZip: $('#' + dialog_id + ' input[name="compZip"]' ).val(),
    compCountry: $('#' + dialog_id + ' input[name="compCountry"]' ).val(),
    ajaxMode:   "true"
}

var url = "update_group.php";
$.ajax({
  type: "POST",
  url: url,
  data: data,
}).done(function(result) {
    processJSONResult(result);
    saveImageUrl(myFileList,group_id);
    window.location.reload();
});
return;
}

成功，然后调用saveImageUrl：

    function saveImageUrl(myFileList,group) {
    if (group==false) return false;
    if (myFileList.length!=1) return false;
        // Create a temporary formdata object and add the files
            myurl="upload.php";
console.log("saveImageUrl. myFileList="+myFileList+". group=" + group + ". myurl=" + myurl);
console.log("myFileList[length]="+myFileList[length]);
console.log("myFileList.length="+myFileList.length);
            var data = new FormData();
            data.append("group",group);
            $.each(myFileList, function(key, value)
                {
                data.append(key, value);
                });
/** alternate
            var xhr = new XMLHttpRequest();
            xhr.open('POST','upload.php',true);
            xhr.onreadystatechange = function() {
                console.log("onreadystatechange state="+xhr.readyState);
                console.log("onreadystatechange status="+xhr.status);
                console.log("onreadystatechange responseText="+xhr.responseText);
                };
            xhr.send(data);
**/
            $.ajax({
                url: myurl,
                type: 'POST',
                data: data,
                cache: false,
                processData: false, // Don't process the files
                contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                success: function(data)
                    {
console.log("upload success with data=");
console.log(data);
                    },
                error: function(data)
                    {
console.log("upload error with data=");
console.log(data);
                    }
                });
console.log("image_url=" + image_url);
}

所有额外的评论都试图了解发生了什么。

upload.php文件的开头和结尾为：

<?php
file_put_contents('uploads/debug.txt','---upload+',FILE_APPEND);

...

echo json_encode(array(
    "files" => $files,
    "errors" => count($errors),
    "successes" => count($successes)));

＆GT;

同样，证据表明，当我们不使用SSL时，file_put_contents正常工作，但在我们使用SSL时却无法触及。使用firebug，控制台显示对upload.php的调用，虽然它总是显示为红色，我们最终出现错误：阻止，但是没有内容到＆＃34; console.log（数据）＆＃34;线。这可能只是返回json的一个问题，虽然这看起来不错。我认为，真正的问题是它在不使用SSL时会成功，但在我们确实实施时会失败。成功，文件上传并通过update.php保存在正确的位置。

我不了解SSL更改如何影响事情。其他ajax电话很好;它只有一个问题

processData: false, // Don't process the files
contentType: false, // Set content type to false or jQuery will tell the server its a string

我理解为了正确处理ajax文件上传所需的

。

还有更多我不了解的事情吗？

谢谢，埃里克

Answer 1

问题的核心是顺序ajax调用。在开发和非SSL生产中，它运作良好。但是，使用SSL，真正的问题在于：时间。

解决方案是添加：

async：false，

到upload.php的ajax调用。将它添加到第一个ajax请求没有帮助。只将它添加到第二个。

像许多问题一样，它在原帖中并不十分准确，但我发现了很多类似的问题并没有多少令人满意的答案。希望这将成为别人搜索的另一个线索。

埃里克

ajax文件上载仅在SSL终止负载均衡器时失败

1 个答案: