집 > 기사 > 웹 프론트엔드 > JS는 사용자 정의 시간 목록을 만듭니다.

JS는 사용자 정의 시간 목록을 만듭니다.

php中世界最好的语言원래의: 2018-06-15 14:55:251574검색

이번에는 JS를 사용해 맞춤 시간 목록을 만들겠습니다. JS로 맞춤 시간 목록을 만들 때 주의할 점은 무엇인가요?

얼마 전 개인 프로젝트를 할 때 nodejs 서버를 이용해 파일을 업로드했는데, 이제 기록용으로 정리하겠습니다.

파일을 업로드할 때 express의 multiparty를 사용합니다. 물론 connect-multiparty 미들웨어를 사용하여 구현할 수도 있지만, connect-multiparty 미들웨어의 공식적인 사용은 권장하지 않는 것 같습니다. 더 이상 고민하지 말고 아래 코드를 살펴보겠습니다.

단계:

(1) express를 사용하여 프로젝트를 만듭니다. 기본값은 jade 템플릿 엔진이지만 아직 html이 익숙해서 html 템플릿으로 변경했습니다.
(2) 프로젝트 디렉터리에서 npm install multiparty를 통해 필요한 구성 요소를 설치합니다.
(3) views/index.html을 수정하고 파일 업로드 양식을 추가합니다.

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) 페이지 업로드 및 응답 업로드를 위한 배경 코드를 구현하도록 Routes/index.js를 수정하세요.

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;

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!