无法理解和转换此JQuery代码

我是一个相对较新的JavaScript程序员,我试图做一个AJAX Node JSfile upload系统。 我find了一个片段,它应该可以将AJAX请求发送给Node服务器。 我没有经验的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> 

我不觉得包括节点的JS服务器端代码是必要的,因为它只是采取请求,并使用MULTER模块来处理和上传文件。 任何帮助是受欢迎的。

谢谢,卡梅隆

编辑:此外,如果任何人有一个想法,以简化一个节点的JSfile upload在正常的JavaScript没有页面重新加载,这将是伟大的。

 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帮助, readystatestatus http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

为纯JavaScript表单发送http://www.sitepoint.com/easier-ajax-html5-formdata-interface/

如果我正确阅读这个,你正在使用jQuery表单插件。 你可以在这里看到源代码: https : //github.com/malsup/form/blob/master/jquery.form.js

请注意,您的用例正在使用file upload,因此相关代码位于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是浏览器提供的对象,用于在现代浏览器中处理file upload。