2

我是 AJAX 的新手，正在研究一种表单的实现，该表单将上传名称和文件到处理数据并将其发送到数据库以使用 mysqli 插入的 php 文件。我已经测试了 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>
4

2 回答 2

1

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

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

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

如果您想要尖端技术，请使用 File API。这是一些如何使用 javascript 读取文件的教程。

使用ajax上传的步骤：

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

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

filereader API允许您逐段读取文件并上传文件片段，因此可以分块上传大文件，但需要您自己处理。

于 2013-03-12T16:29:53.440 回答
0

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

    <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>
于 2013-03-12T16:05:39.013 回答