无法理解和转换此 JQuery 代码答案

【问题标题】：Having Trouble Understanding and Converting this JQuery Code无法理解和转换此 JQuery 代码
【发布时间】：2015-05-27 05:22:41
【问题描述】：

我是一个相对较新的 JavaScript 程序员，我正在尝试制作一个 AJAX Node JS 文件上传系统。我找到了一个 sn-p，它应该可以将 AJAX 请求发送到节点服务器。我没有使用 JQuery 的经验，代码是用它编写的。如果有人可以帮助我将其转换为普通的 JS，那就太好了。甚至帮助理解它的内部运作也会有所帮助。

<html>
<head>
<title>File upload Node.</title>
</head>
<body>
    <form id="uploadForm"
         enctype="multipart/form-data"
         action="/api/photo"
         method="post">
        <input type="file" name="userPhoto" />
        <input type="submit" value="Upload Image" name="submit">
    </form>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js">    </script>
<script>
  //AJAX CODE STARTS HERE (uses JQuery Form)
  $(document).ready(function() {

     $('#uploadForm').submit(function() {

        $(this).ajaxSubmit({

            error: function(xhr) {
                    status('Error: ' + xhr.status);
            },

            success: function(response) {
                      console.log(response);
            }
        });
        //Very important line, it disable the page refresh.
        return false;
     });    
  });
</script>
</html>

我觉得不需要包含 Node JS 服务器端代码，因为它所做的只是接受请求并使用 multer 模块来处理和上传文件。欢迎任何帮助。

谢谢，卡梅伦

编辑：另外，如果有人想在普通 JavaScript 中简化 Node JS 文件上传而无需重新加载页面，那就太好了。

【问题讨论】：

所以你想用纯 javascript 调用 ajax 对吗？
@KevalBhatt 这是正确的，但我不明白 jquery 具体做什么来发送正确的请求。

标签： javascript jquery ajax node.js express

【解决方案1】：

document.getElementById("uploadForm").onsubmit = function(e) {

    e.preventDefault();  //Very important line, it disable the page refresh.

    var f = e.target,
        formData = new FormData(f),
        xhr = new XMLHttpRequest();

    xhr.open("POST", f.action);
    xhr.onreadystatechange=function()
    {
       if (xhr.readyState==4 && xhr.status==200) // means success
       {
          console.log(response);
       }else{ // may mean error, check appropriate status and readyState for error
          status('Error: ' + xhr.status);
       }
    }
    xhr.send(formData);
}

来源：在onreadystatechange、readystate 和status 寻求帮助http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

对于纯 javascript 表单发送 http://www.sitepoint.com/easier-ajax-html5-formdata-interface/

【讨论】：

【解决方案2】：

如果我没看错，您使用的是 jQuery 表单插件。您可以在这里查看源代码：https://github.com/malsup/form/blob/master/jquery.form.js

请注意，您的用例正在使用文件上传，因此相关代码在 fileUploadXhr 函数中

    // XMLHttpRequest Level 2 file uploads (big hat tip to francois2metz)
function fileUploadXhr(a) {
    var formdata = new FormData();

    for (var i=0; i < a.length; i++) {
        formdata.append(a[i].name, a[i].value);
    }

    if (options.extraData) {
        var serializedData = deepSerialize(options.extraData);
        for (i=0; i < serializedData.length; i++) {
            if (serializedData[i]) {
                formdata.append(serializedData[i][0], serializedData[i][1]);
            }
        }
    }
    . . .

FormData 是浏览器提供的对象，可帮助您在现代浏览器中处理文件上传。

【讨论】：

您能解释一下如何在我的情况下使用它吗？我仍然不明白如何让它与我的设置一起使用。