当前位置：网站首页>An end-to-end file upload program based on form, including client and server

An end-to-end file upload program based on form, including client and server

2022-07-27 17:37:00 【Wang Zixi】

client

It's actually a simple html Webpage , The source code is as follows ：

<html>
<form id="fu_form" enctype="multipart/form-data" method="post" action="http://localhost:3003/upload" style="display: inline-block;">
    <input type="file" name="myFileUpload" id="fileUploader-fu" tabindex="-1" size="1" title="Upload your file to the local server">
    <input type="submit" value="Submit">
</form>
</html>

Create a new one .html file , Copy the above source code , Open with a browser , See the following page .

Note that in the browser address bar url：file:///C:/Code/UI5/Walkthrough/110/sample.html

form Of action attribute , Point to hard coded “http://localhost:3003/upload”, So we also need to write a server , Listen on this address , Used to receive form Uploaded local files .

Server side

One adoption Node.js Developed applications , Simply receive the files uploaded by the client , Print out the file name and file size .

The source code is as follows ：

var multiparty = require('multiparty');
var http = require('http');
//var util = require('util');
const PORT = 3003;

http.createServer(function(req, res) {
    
  if (req.url === '/upload' && req.method === 'POST') {
    
    var form = new multiparty.Form();

    form.parse(req, function(err, fields, files) {
    
      var aResult = [];
      var aUploaded = files.myFileUpload;
      for( var i = 0; i < aUploaded.length; i++){
    
        console.log('file name: ', aUploaded[i].originalFilename, 'size: ' , aUploaded[i].size);
        aResult.push({
    
          name: aUploaded[i].originalFilename,
          size:aUploaded[i].size
        });
      }
      res.writeHead(200, {
     'content-type': 'text/html' });
      res.end("<p>File uploaded ok!</p>");
    });
    return;
  }
}).listen(PORT);

console.log('listen on port:' + PORT);

Create a new one ui5FileServer.js file , Put the above source code , Paste in .

Usage method

Execute the command line npm init Initialize a npm project , Then put the above ui5FileServer.js Paste file in .

package.json Refer to the following code for details ：

{
    
  "name": "sap.m.tutorial.walkthrough.109",
  "version": "1.0.0",
  "author": "SAP SE",
  "description": " The simplest  SAP UI5  Example of local file upload ",
  "scripts": {
    
    "start": "ui5 serve",
    "build": "ui5 build"
  },
  "devDependencies": {
    
    "@ui5/cli": "^2.0.0",
    "express": "^4.12.4",
    "http-proxy": "latest"
  },
  "dependencies": {
    
    "multer": "^1.4.5-lts.1",
    "multiparty": "^4.2.3"
  }
}

stay npm In the project , perform npm install Installation dependency , And then use node ui5FileServer.js Start the server , You can see the following output ：listen on port:3003

It indicates that the server is already listening 3003 port , Wait for the client to upload files .

Back to the client , Click on Choose File Select a file locally ：

The meaning of the figure below is to select a 1.txt file , Click on Submit Upload ：

Click on Submit after , Notice that the address bar has become ：http://localhost:3003/upload

And printed out File uploaded ok! The response from the server .

This is our client page action The server-side address for receiving file uploads written in .

This response is written in the server-side section 21 Line code ：

原网站

版权声明
本文为[Wang Zixi]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271506161438.html

边栏推荐

猜你喜欢

随机推荐