Question

我是AJAX的新手，正在开发一个表单的实现，该表单将名称和文件上传到php文件，该文件处理数据并将其发送到数据库以便使用mysqli进行插入。我测试了php文件，它确实有效。我的问题在于AJAX代码。我尝试过使用XMLHTTP和使用jQuery的实现。两者都离开页面并在浏览器中打开PHP文件。作为一个折叠者，我把这个问题发布到另一个编码网站，两个海报之间发生了争执，所以我在这里试图通过富有成效的建议得到一个合理而平静的回应。

我意识到目前“get”正在发送到PHP文件而不是“post”，但PHPStorm告诉我“post”在该表单中不可用。我的替代方案是什么？我是在正确的轨道还是我应该去另一个方向？如何仅刷新表单并防止加载PHP页面？

以下是我的代码的相关摘要

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script>
        $(document).ready(function() {
            $('#addForm').validate({

                submitHandler: function (form) {
                    $('input[name="usingAJAX"]', this).val('true');
                    var url = $(form).prop('action');
                    var dataToSend = $(form).serialize();
                    var callback = function(dataReceived) {
                        $(form).hide();
                        //result message
                        $('body').append(dataReceived)
                    };
                    var typeOfDataToReceive = 'html';

                    $.get(url, dataToSend, callback, typeOfDataToReceive),
                    return false;
                }
            });
        });

    </script>
</head>
<body>
<form id="addForm" action="addInfo.php" enctype="multipart/form-data">
    <input type="hidden" name="usingAJAX" value="false"/>
    <label for="aname">Name: </label>
    <input type="text" name="aname" id="aname" class=required/>
    <label for="aimage">Photo: </label>
    <input id="aimage" type="file" name="aimage" class="required">
    <input type="submit" value="ADD"/>
</form>
</body>
</html>

Answer 1

直到最近，您无法使用ajax上传文件。

您仍然无法使用ajax直接上传文件，但您可以使用HTML5 File API以编程方式执行此操作。

但是，如果您正在寻找简单的解决方案，请尝试传统的IFrame方法。

如果您需要bleading edge技术，请使用File API。以下是tutorial如何使用javascript读取文件。

使用ajax上传的步骤：

使用javascript FileReader API读取文件。
将编码为base64或其他内容的文件内容发布到服务器。
Serverside，以编程方式解码文件的内容。

使用此方法时，服务器不会将文件作为文件上载处理。它将只是另一个带有文本的请求字段。您可以在服务器端对其进行解码。

文件阅读器API允许您逐个部分地读取文件并上传文件片段，因此可以以块的形式上传大文件，但您需要自己处理它。

Answer 2

尝试使用插件jQuery form.js http://www.malsup.com/jquery/form/#file-upload您可以使用ajax和jQuery上传文件。它易于使用，只需要在ajaxSubmit函数中给出#form-id。

    <script>
    $(document).ready(function() {
        $('#addForm').validate({

            submitHandler: function (form) {
                $('input[name="usingAJAX"]', this).val('true');
                var options = {
                   url : $(form).prop('action'),
                   dataToSend : $(form).serialize(),
                   callback : function(dataReceived) {
                    $(form).hide();
                    //result message
                    $('body').append(dataReceived) },
                   typeOfDataToReceive = 'html';
                     //your options here 
               };

               $('#yourFormid').ajaxSubmit(options);

                return false;
            }
        });
    });

</script>

如何使用ajax上传文本字段和文件？

2 个答案: