Question

我是一个相对较新的JavaScript程序员，我正在尝试创建一个AJAX Node JS文件上传系统。我找到了一个片段，它应该用于向节点服务器发送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文件上传，那就太棒了。

Answer 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/

Answer 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是浏览器提供的对象，可帮助您在现代浏览器中处理文件上传。

有麻烦理解和转换此JQuery代码

2 个答案: