検索
ホームページバックエンド開発PHPチュートリアルファイルアップロード機能を実現するAjaxとnode.jsマルチターの詳細説明

ノード初心者として、私は現在、登録、ログイン、オンラインの一人および複数人チャット、絵文字の送信、さまざまなファイルのアップロードとダウンロード、友達の追加と削除、チャット記録の保存、通知音の切り替え、背景画像の切り替え、ゲームなどの機能を実現するために、multer モジュールを使用しました。さまざまなドキュメントの検索とデモの例を経て、ほとんどのファイル形式のアップロードをサポートし、それを Web ページに表示する単一ファイルのアップロード機能を実装することに成功しました。この記事では主に Ajax と Node js Multer のファイルアップロード機能について紹介します。必要な方は参考にしていただければ幸いです。

効果

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, './public/upload')
  },
  filename: function (req, file, cb){
    //设置文件的名字为其原本的名字,也可以添加其他字符,来区别相同文件,例如file.originalname+new Date().getTime();利用时间来区分
    cb(null, file.originalname)
  }
});
var upload = multer({
  storage: storage
});
//处理来自页面的ajax请求。single文件上传
app.post('/upload', upload.single('file'), function (req, res, next) {
  //拼接文件上传后的网络路径,
  var url = 'http://' + req.headers.host + '/upload/' + req.file.originalname;
  //将其发回客户端
  res.json({
    code : 1,
    data : url
  });
  res.end();
});

クライアント コード

nbsp;html>


  <meta>
  <title></title>
  <!--依托于jquery-->
  <script></script>


  <p>
    <label>file</label>
    <input>
  </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}">`;
                }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}">`;
                }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}">`;
          }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}">`;
                }else{
          //所有的图片格式      
                  msg=`<a href="javascript:;" rel="external nofollow" class="picCheck"><img  src="/static/imghwm/default1.png"  data-src="${src}"  class="lazy"   alt="ファイルアップロード機能を実現するAjaxとnode.jsマルチターの詳細説明" >`;
                }
                // 这里将msg 追加到你要显示的区域 
              }
            } 
         //不满足上传格式时 
        }else{
          alert("文件格式不支持上传")
        }
      }
</script>

関連推奨事項:

multer の定義と使用法の概要

nodejs multer を使用するサンプル チュートリアルを共有するファイルのアップロードとダウンロードを実装します

Nodejs の高度な: Express+multer に基づくファイル アップロードの例

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
負荷分散がセッション管理にどのように影響し、それに対処するかを説明します。負荷分散がセッション管理にどのように影響し、それに対処するかを説明します。Apr 29, 2025 am 12:42 AM

負荷分散はセッション管理に影響しますが、セッションの複製、セッションの粘着性、集中セッションストレージで解決できます。 1。セッションレプリケーションサーバー間のセッションデータをコピーします。 2。セッションスティンネスは、ユーザーリクエストを同じサーバーに指示します。 3.集中セッションストレージは、Redisなどの独立したサーバーを使用してセッションデータを保存してデータ共有を確保します。

セッションロックの概念を説明します。セッションロックの概念を説明します。Apr 29, 2025 am 12:39 AM

SESSIONLOCKINGISATECHNIQUESTOESUREAUSER'SSESSIONREMAINSEXCLUSIVETOONEUSATIME.ITISCRUCIALFORPREVENTINGDATACORTIONANDSECURITYBREACHESINMULTI-USERAPPLICATIONS.SESSIONLOCKINGISISIMPLEMENTEDUSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGSINGROCKINGSMECHANISMなど

PHPセッションの選択肢はありますか?PHPセッションの選択肢はありますか?Apr 29, 2025 am 12:36 AM

PHPセッションの代替品には、Cookie、トークンベースの認証、データベースベースのセッション、Redis/Memcachedが含まれます。 1.Cookiesは、クライアントにデータを保存することによりセッションを管理します。 2.トークンベースの認証はトークンを使用してユーザーを検証します。これは非常に安全ですが、追加のロジックが必要です。 3.Databaseベースのセッションは、データベースにデータを保存します。これは、スケーラビリティが良好ですが、パフォーマンスに影響を与える可能性があります。 4. Redis/Memcachedは分散キャッシュを使用してパフォーマンスとスケーラビリティを向上させますが、追加のマッチングが必要です

PHPのコンテキストで「セッションハイジャック」という用語を定義します。PHPのコンテキストで「セッションハイジャック」という用語を定義します。Apr 29, 2025 am 12:33 AM

SessionHijackingとは、ユーザーのSessionIDを取得してユーザーになりすましている攻撃者を指します。予防方法には、次のものが含まれます。1)HTTPSを使用した通信の暗号化。 2)SessionIDのソースの検証。 3)安全なSessionID生成アルゴリズムの使用。 4)SessionIDを定期的に更新します。

PHPの完全な形式は何ですか?PHPの完全な形式は何ですか?Apr 28, 2025 pm 04:58 PM

この記事では、PHPについて説明し、その完全なフォーム、Web開発での主要な使用、PythonとJavaとの比較、および初心者の学習のしやすさについて説明します。

PHPはフォームデータをどのように処理しますか?PHPはフォームデータをどのように処理しますか?Apr 28, 2025 pm 04:57 PM

PHPは、$ \ _ postおよび$ \ _を使用してフォームデータを処理し、検証、消毒、安全なデータベースインタラクションを通じてセキュリティを確保します。

PHPとASP.NETの違いは何ですか?PHPとASP.NETの違いは何ですか?Apr 28, 2025 pm 04:56 PM

この記事では、PHPとASP.NETを比較して、大規模なWebアプリケーション、パフォーマンスの違い、セキュリティ機能への適合性に焦点を当てています。どちらも大規模なプロジェクトでは実行可能ですが、PHPはオープンソースであり、プラットフォームに依存しませんが、ASP.NET、

PHPはケースに敏感な言語ですか?PHPはケースに敏感な言語ですか?Apr 28, 2025 pm 04:55 PM

PHPの症例感度は変化します:関数は鈍感であり、変数とクラスは感度があります。ベストプラクティスには、一貫した命名と、比較のためにケース非感受性関数を使用することが含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター