Question

Was doing POST operation using ajax() and XMLHttpRequest(). Ajax from HTML form itself where as XMLHttpRequest() was using javascript. Below is the code for both requests made.

XMLHttpRequest() client side code:

multiUpload(uploadFiles){                       
        return new Promise((resolve, reject)=> {
        var uploadFormData = new FormData();
        var i=0;

        for(i=0; i < uploadFiles.length ; i++){          
                uploadFormData.append('uploadFiles', uploadFiles[i]);
            }

            var xhr = new XMLHttpRequest();   
                 xhr.open('post', MULTI_FILE_UPLOAD_URL , true);

            xhr.onload = function () {
              if (this.status == 200) {     
                    console.log("Resolve done !!!");            
                    resolve(this.response);
                 } else {
                        console.log("Reject done !!!");
                        reject(this.statusText);
                }
                };
                console.log(uploadFormData);    
                xhr.send(uploadFormData);
            });
        }

uploadFiles contains FileList object in the above code having multiple files objects.

Client side code for making ajax call:

<form id="uploadForm" enctype="multipart/form-data" action="/api/photo" method="post">
      <input type="file" name="userPhoto" multiple />
             <!-- Input form goes here -->
</form>
        <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>
            $(document).ready(function(){
                $('#uploadForm').submit(function() {
                        $("#status").empty().text("File is uploading...");
                            $(this).ajaxSubmit({
                                error: function(xhr) {
                                    status('Error: ' + xhr.status);
                                },
                                success: function(response) {
                                            console.log(response)
                                $("#status").empty().text(response);
                            }
                            });
                        return false;
                });    
            });
        </script>

Server side code for XMLHttpRequest() and ajax call:

var storage =   multer.diskStorage({
         destination: function (req, file, callback) {
                callback(null, newPath);
            },
        filename: function (req, file, callback) {
                callback(null, file.originalname );
            }});

    var upload = multer({ storage : storage }).array('userPhoto');

    app.post('/multiFileUpload', function(req, res) {

         upload(req,res,function(err){
                console.log(req);
          if(err){
                console.log("Error in upoading file "+err);
            return res.send("Server Error in uploading file.");
        }
                res.send("File is uploaded successfully.");
        });

Now, when I display the req object in the console from the server code, I am getting the following result （左边是ajax调用，右边是XMLHttpRequest（）调用）。我实际上是在服务器上一次上传多个文件。随着ajax调用文件上传，但使用XMLHttpRequest（），这不会发生，并且会出现错误。如何用XMLHttpRequest（）实现相同的结果？还有一件事，应用程序对象的创建方式是：

对于XMLHttpRequest（） -

var express = require('express');
var app = module.exports = express.Router();

对于Ajax，调用是： -

var express =   require("express");
var app =   express();

那么，这会产生问题吗？

Multiple files uploaded on server while doing ajax post but not being uploaded using XMLHttpRequest() post?

0 个答案: