recherche

Maison  >  Article  >  interface Web  >  Ajax coopère avec Node js multer pour implémenter la fonction de téléchargement de fichiers

Ajax coopère avec Node js multer pour implémenter la fonction de téléchargement de fichiers

亚连
亚连original
2018-05-22 10:00:341497parcourir

Cet article présente principalement Ajax et node js multer pour implémenter la fonction de téléchargement de fichiers. Les amis qui en ont besoin peuvent se référer aux

Instructions

<.> En tant que débutant en nœud, j'ai récemment travaillé sur un logiciel de chat qui prend en charge l'inscription, la connexion, le chat en ligne pour une ou plusieurs personnes, l'envoi d'émoticônes, divers téléchargements et téléchargements de fichiers, l'ajout et la suppression d'amis, la sauvegarde des enregistrements de chat, le son des notifications. commutateur, changement d'image d'arrière-plan, Pour les jeux et d'autres fonctions, le module multer a été utilisé. Après diverses recherches de documents et exemples de démonstration, j'ai finalement implémenté avec succès la fonction de téléchargement de fichier unique, qui prend en charge le téléchargement de la plupart des formats de fichiers et l'affiche sur la page Web. en même temps

L'effet

A-t-on l'impression que WeChat est instantanément visible Oui, il est basé sur la version Web de WeChat ? .

Pour obtenir l'effet global, cela doit être fait avec du CSS et du HTML. Je suis un débutant en front-end et c'est la première fois que je publie un blog. Je suis vraiment anxieux. Dans un avenir proche, je mettrai le code sur github. Les amis intéressés peuvent y jeter un œil

Entrez le code directement ci-dessous, abusez légèrement

Configuration.

Installation

Installez multer directement via la fenêtre de commande cmd

npm install multer -save
Code du serveur 

//引入http
const http=require("http");
//引入express
const express=require("express");
//引入multer
const multer=require("multer");
//创建服务器，绑定监听端口
var app=express();
var server=http.createServer(app);
server.listen(8081);
//建立public文件夹，将HTML文件放入其中，允许访问
app.use(express.static("public"));
//文件上传所需代码
//设置文件上传路径和文件命名
var storage = multer.diskStorage({
  destination: function (req, file, cb){
    //文件上传成功后会放入public下的upload文件夹
    cb(null, &#39;./public/upload&#39;)
  },
  filename: function (req, file, cb){
    //设置文件的名字为其原本的名字，也可以添加其他字符，来区别相同文件，例如file.originalname+new Date().getTime();利用时间来区分
    cb(null, file.originalname)
  }
});
var upload = multer({
  storage: storage
});
//处理来自页面的ajax请求。single文件上传
app.post(&#39;/upload&#39;, upload.single(&#39;file&#39;), function (req, res, next) {
  //拼接文件上传后的网络路径，
  var url = &#39;http://&#39; + req.headers.host + &#39;/upload/&#39; + req.file.originalname;
  //将其发回客户端
  res.json({
    code : 1,
    data : url
  });
  res.end();
});
Code client

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!--依托于jquery-->
  <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
  <p class="container">
    <label>file</label>
    <input type="file" name="file" id="file">
  </p>
<script>
      var file=$("#file")[0];
      //这里使用的是onchange事件，所以当你选择完文件之后，就触发事件上传
      file.onchange=function(){
        //创建一个FormDate
        var formData=new FormData();
        //将文件信息追加到其中
        formData.append(&#39;file&#39;,file.files[0]);
        //利用split切割，拿到上传文件的格式
        var src=file.files[0].name,
            formart=src.split(".")[1]; 
        //使用if判断上传文件格式是否符合                                                          
                                                              if(formart=="jpg"||formart=="png"||
        formart=="docx"||formart=="txt"||
        formart=="ppt"||formart=="xlsx"||
        formart=="zip"||formart=="rar"||
        formart=="doc"){
        //只有满足以上格式时，才会触发ajax请求
          $.ajax({
            url: &#39;/upload&#39;,
            type: &#39;POST&#39;,
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
            //上传成功之后，返回对象data         
              if(data.code>0){
                var src=data.data;
                    //利用返回值src 网络路径，来实现上传文档的下载    
                    if(formart=="docx"||formart=="txt"||formart=="doc"){
                    //结合css样式，实现显示图标
                  var className="docx";
                    //拼接html，生成到页面上去  
                  var msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
                }else if(formart=="ppt"){
            //PPT 格式
                    className="ppt";
                  msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
                }else if(formart=="xlsx"){
            //xlsx 格式
                    className="xlsx";
                  msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
          }else if(formart=="zip"||formart=="rar"){
          //zip || rar 格式
                    className="zip";
                  msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
                }else{
          //所有的图片格式      
                  msg=`<a href="javascript:;" rel="external nofollow" class="picCheck"><img src="${src}"></a>`;
                }
                // 这里将msg 追加到你要显示的区域 
              }
            } 
         //不满足上传格式时 
        }else{
          alert("文件格式不支持上传")
        }
      }
</script>
</body>
</html>
Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Explication détaillée de l'utilisation de la file d'attente de requêtes AJAX

ajaxExplication détaillée de étapes pour implémenter la disposition du flux en cascade (code joint)

jQuery+json crée une fonction d'appel Ajax (code joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des étapes pour commencer à modifier les ports à l'aide du mode commande de nœudArticle suivant：Explication détaillée des étapes pour commencer à modifier les ports à l'aide du mode commande de nœud

Articles Liés

Voir plus