Проблемы с пониманием и преобразованием этого кода JQuery

Я относительно новый программист JavaScript, и я пытаюсь создать систему загрузки файлов JJ AJAX Node. Я нашел фрагмент, который должен работать, чтобы отправить запрос AJAX на сервер узла. У меня нет опыта работы в JQuery, и код написан с ним. Если бы кто-нибудь мог помочь мне преобразовать это в обычный JS, это было бы здорово. Даже помощь в понимании его внутренней работы может быть полезна.Проблемы с пониманием и преобразованием этого кода JQuery

<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 модуль для обработки и загрузки файла. Любая помощь приветствуется.

Спасибо, Cameron

EDIT: Кроме того, если кто-нибудь имеет представление о том, чтобы упростить загрузку в Node JS-файла в обычном JavaScript без перезагрузки страницы, что было бы здорово.

источник

2015-05-27 Cameron Jones

так что вы хотите АЯКС вызова в чистом яваскрипте права? –

@KevalBhatt Это правильно, но я не понимаю, что именно делает jquery для отправки правильного запроса. –

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 и statushttp://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

для чистого JavaScript формы отправить http://www.sitepoint.com/easier-ajax-html5-formdata-interface/

источник

2015-05-27 06:15:04 Ruchan

Если я читаю это правильно, вы используете плагин формы 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 является объект обеспечивается браузерами, чтобы помочь обработать загрузку файла в современных браузерах.

источник

2015-05-27 05:57:01 goofballLogic

Не могли бы вы объяснить, как использовать это в моем случае? Я все еще не понимаю, как заставить это работать с настройкой, которую у меня есть. –

Проблемы с пониманием и преобразованием этого кода JQuery

ответ

Смежные вопросы