Ajaxがnode js multerと連携してファイルアップロード機能を実装-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Ajaxがnode js multerと連携してファイルアップロード機能を実装

亚连

May 22, 2018 am 10:00 AM

javascript node

この記事では、ファイルアップロード機能を実装するためのAjaxとnode js multerを主に紹介します

手順

最近、node初心者として、サポートするチャットソフトウェアに取り組んでいます。登録、ログイン、オンライン1人および複数人チャット、絵文字送信、各種ファイルのアップロードとダウンロード、友達の追加と削除、チャット記録の保存、通知音切り替え、背景画像切り替え、ゲームなどの機能を使用するため、multerモジュールを使用しました。たとえば、ほとんどのファイル形式のアップロードをサポートし、それを同時に Web ページに表示する単一ファイルのアップロード機能の実装に成功しました

。 WeChat が表示されているように感じますか? はい、Web バージョンの WeChat に基づいて行われます。

全体的な効果を実現したい場合は、CSS と HTML を連携する必要があります。初心者でブログを投稿するのは初めてなのでとても不安です。近いうちにコードをgithubに載せますので、興味のある方は見てみてください

以下のコードを軽く悪用します。

設定

インストール

cmdコマンドウィンドウから直接multerをインストール

npm install multer -save

ログイン後にコピー

サーバーコード

//引入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();
});

ログイン後にコピー

クライアントコード

<!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>

ログイン後にコピー

上記は、私が全員のためにコンパイルしたものですそうなることを願っています今後も皆様のお役に立ちますように。

AJAXリクエストキューの使い方を詳しく解説

ajaxウォーターフォールフローレイアウト実装手順を詳しく解説(コード付き)

jQuery+jsonでAjax呼び出し関数を作る(コード付き)

以上がAjaxがnode js multerと連携してファイルアップロード機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7510

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？ Mar 05, 2025 pm 05:57 PM

ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか？ PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか？ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用