suchen

Heim  >  Artikel  >  Web-Frontend  >  JS erstellt eine benutzerdefinierte Zeitliste

JS erstellt eine benutzerdefinierte Zeitliste

php中世界最好的语言
php中世界最好的语言Original
2018-06-15 14:55:251618Durchsuche

Dieses Mal bringe ich Ihnen JS mit, um eine benutzerdefinierte Zeitliste zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer benutzerdefinierten Zeitliste mit JS? Hier ist ein praktischer Fall. Schauen wir uns das an.

Als ich vor einiger Zeit an einem persönlichen Projekt arbeitete, habe ich den NodeJS-Server zum Hochladen von Dateien verwendet. Jetzt werde ich dies für das Protokoll zusammenfassen.

Wenn ich Dateien hochlade, verwende ich die Multiparty-Funktion von Express. Natürlich kann dies auch mit der Connect-Multiparty-Middleware implementiert werden, aber der Beamte scheint die Verwendung der Connect-Multiparty-Middleware nicht zu empfehlen. Schauen wir uns ohne weitere Umschweife den folgenden Code an.

Schritte:

(1) Verwenden Sie Express, um ein Projekt zu erstellen. Die Standardeinstellung ist die Jade-Template-Engine, aber ich bin immer noch an HTML gewöhnt, also habe ich sie geändert zur HTML-Vorlage.
(2) Installieren Sie im Projektverzeichnis die erforderlichen Komponenten über npm install multiparty.
(3) Ändern Sie „views/index.html“ und fügen Sie ein Datei-Upload-Formular hinzu.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
</head>
<body>
  上传文件
  <form method=&#39;post&#39;, action=&#39;/file/uploading&#39;, enctype=&#39;multipart/form-data&#39;>
    <input type="file" name="inputFile">
    <input type="submit" value="上传">
  </form>
</body>
</html>

(4) Ändern Sie Routes/index.js, um den Hintergrundcode für das Hochladen von Seiten und Antworten zu implementieren. 

var express = require('express');
var router = express.Router();
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');
/* 上传页面. */
router.get('/', function(req, res, next) {
 //res.render('./views/index');
 res.sendfile('./views/index.html');
});
/* 上传 */
router.post('/file/uploading', function(req, res, next) {
  /* 生成multiparty对象，并配置上传目标路径 */
  var form = new multiparty.Form();
  /* 设置编辑 */
  form.encoding = 'utf-8';
  //设置文件存储路劲
  form.uploadDir = './public/files';
  //设置文件大小限制
  form.maxFilesSize = 2 * 1024 * 1024;
  // form.maxFields = 1000;  //设置所有文件的大小总和
  //上传后处理
  form.parse(req, function(err, fields, files) {
    var filesTemp = JSON.stringify(files, null, 2);
    if(err) {
      console.log('parse error:' + err);
    }else {
      console.log('parse files:' + filesTemp);
      var inputFile = files.inputFile[0];
      var uploadedPath = inputFile.path;
      var dstPath = './public/files' + inputFile.originalFilename;
      //重命名为真实文件名
      fs.rename(uploadedPath, dstPath, function(err) {
        if(err) {
          console.log('rename error:' + err);
        }else {
          console.log('rename ok');
        }
      })
    }
    res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'});
    res.write('received upload:\n\n');
    res.end(util.inspect({fields: fields, files: filesTemp}))
  })
})
module.exports = router;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So bedienen Sie NodeJS zum Verschlüsseln von Passwörtern

jquery+fullpage fügt Header und Copyright hinzu

Das obige ist der detaillierte Inhalt vonJS erstellt eine benutzerdefinierte Zeitliste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine detaillierte Einführung in kontrollierte und unkontrollierte Komponenten in ReactNächster Artikel：Eine detaillierte Einführung in kontrollierte und unkontrollierte Komponenten in React

In Verbindung stehende Artikel

Mehr sehen