Ajax非同期ファイルアップロードとNodeJSエクスプレスサーバー処理
単純な非同期ファイルアップロード機能を実装するときにサードパーティのライブラリファイルを導入するという厄介な状況を回避するために（ライブラリファイルは、特にライブラリファイルが導入された後、余分なオーバーヘッドを引き起こし、アプリケーションの読み込み速度を低下させる可能性があります。そのうちの1つまたは2つを使用します1つの関数の場合、費用対効果は非常に低いです）、最近、非同期ファイルアップロードの実装原理について学び、進行状況バー、画像プレビュー、および他の機能、そして簡単な配置をしました。
ファイルのアップロード
HTMLの構造は次のとおりです。ファイル入力とボタンです。 「アップロード」ボタンをクリックすると、ファイル入力で選択したファイルがサーバーにアップロードされます。
アップロード
以下は、「アップロード」ボタンのクリックイベントハンドラーです。ボタンをクリックすると、非同期リクエストがXMLHttpRequestオブジェクト。アップロードされたコンテンツはファイルであるため、FormDataオブジェクトも必要です。 FormDataは、jsでフォームオブジェクトを作成し、ファイル入力ファイルをFormDataオブジェクトに追加し、最後にXHRオブジェクトのsend（）メソッドを呼び出してフォームデータを送信できます。
var file = document.querySelector（'＃file'）;
var upload = document.querySelector（'＃upload'）;
var xhr = new XMLHttpRequest（）;
//アップロードをクリック
functionuploadFile（event）{
var formData = new FormData（）;
formData.append（'test-upload'、file.files [0] ）;
xhr.onload = uploadSuccess;
xhr.open（'post'、'/ upload'、true）;
xhr.send（formData）;
}
//正常にアップロードされました
functionuploadSuccess（event）{
if（xhr.readyState === 4）{
console.log（xhr.responseText）;
} < br />}
アップロードの進行状況
ファイルをアップロードするとき、xhrオブジェクトにはupgress属性があり、進行状況イベントを提供します。の対応するイベントハンドラーである現在のアップロードの進行状況は、イベントオブジェクトを通じて知ることができます。この機能を使用すると、進捗状況を簡単に実現できます。バーまたは進行状況インジケーター。
アップロード
0％ span>
var progress = document.querySelector（'＃progress'）;
//アップロードをクリック
functionuploadFile（event）{
var formData = new FormData（） ;
formData.append（'test-upload'、file.files [0]）;
xhr.onload = uploadSuccess;
xhr.upload.onprogress = setProgress;
xhr .open（'post'、'/ upload'、true）;
xhr.send（formData）;
}
//プログレスバー
functionsetProgress（event）{< br /> if（event.lengthComputable）{
var complete = Number.parseInt（event.loaded / event.total * 100）;
progress.innerHTML = complete +'％';
}
}
画像プレビュー
画像をアップロードするときに、FileReaderオブジェクトを使用して画像のプレビューを実現できます。フィルeReaderユーザーのコンピューター上のファイルを非同期で読み取ることができ、ファイル入力によって選択されたファイルがFileReaderに渡されます。読み取り後、ファイルのURLを取得し、画像要素のsrcとして設定して、選択した画像ファイルを表示します。
アップロード
0 span>
var file = document.querySelector（'＃file'）;
file.addEventListener（'change'、previewImage、false）;
//画像プレビュー
関数previewImage（event ）{
var reader = new FileReader（）;
reader.onload = function（event）{
image.src = event.target.result;
};
reader.readAsDataURL（event.target.files [0]）;
}
サーバー側の処理
expressを使用して、ファイルをアップロードするためのインターフェースを提供する単純なNodeJSサーバーを構築します。ファイルのアップロードをサポートするには、expressはミドルウェアを使用する必要があります。エクスプレス公式サイトにはたくさんの紹介があります。ここでは、multermiddを使用していますleware、および以下は簡単な使用例です。 upload.singleは、このインターフェースで受け入れられるアップロードされたファイルの数が1であることを示し、「test-upload」はアップロードされたフォームデータのキーを「test-upload」（formData.append（'test-upload'、file）に制限します。 files [0]）;）。このミドルウェアで処理した後、req.fileを介してファイルの関連情報にアクセスでき、アップロードされたファイルはuploadsフォルダーに保存されます。
constupload = require（'multer'）（{dest：'uploads /'}）;
app.post（'/ upload'、upload.single（'test-upload'）、（req、 res）=＆gt; {
//添付ファイルなし
if（！req.file）{
res.json（{ok：false}）;
return;
}
//出力ファイル情報
console.log（'============================= =================== ======='）;
console.log（' fieldname：'+ req.file.fieldname）; < br /> console.log（'originalname：' + req.file.originalname）;
console.log（'encoding：' + req.file.encoding）;
console.log（'mimetype： '+ req.file.mimetype）;
console.log（'size：' +（req.file.size / 1024）.toFixed（2）+'KB'）;
console.log（ '宛先：'+ req.file.destination）;
console.log（'ファイル名：'+ req.file.filename）;
console.log（' path：'+ req.file.path） ;
}）;
出力から、ファイル名がハッシュ値で表され、サフィックス名が削除されていることがわかります。ファイルの元の命名形式を維持したい場合は、fsを使用してファイルの名前を変更する必要があります。
app.post（'/ upload'、upload.single（'test-upload'）、（req、res）=＆gt; {
//添付ファイルなし
if（！req .file）{
res.json（{ok：false}）;
return;
}
//ファイル情報を出力
console.log （'================================================ ===='）;
console.log（' fieldname：'+ req.file.fieldname）;
console.log（' originalname：'+ req.file.originalname）;
console.log（'encoding：' + req.file.encoding）;
console.log（'mimetype: ' + req.file.mimetype);
console.log('size: ' + (req.file.size / 1024).toFixed(2) + 'KB');
console.log('destination: ' + req.file.destination);
console.log('filename: ' + req.file.filename);
console.log('path: ' + req.file.path);
// 重命名文件
let oldPath = path.join(__dirname, req.file.path);
let newPath = path.join(__dirname, 'uploads/' + req.file.originalname);
fs.rename(oldPath, newPath, (err) => {
if (err) {
res.json({ ok: false });
console.log(err);
} else {
res.json({ ok: true });
}
});
});
完整代码
ajax异步文件上传、进度显示、图片预览
上传
0
(function () {
'use strict';
var file = document.querySelector('#file');
var upload = document.querySelector('#upload');
var progress = document.querySelector('#progress');
var image = document.querySelector('#image'）;
var xhr = new XMLHttpRequest（）;
upload.addEventListener（' click'、uploadFile、false）;
file.addEventListener（' change'、previewImage 、false）;
//点击上MOSFET
function uploadFile（event）{
var formData = new FormData（）;
formData.append（'test-upload '、file.files [0]）;
xhr.onload = uploadSuccess;
xhr.upload.onprogress = setProgress;
xhr.open（' post'、' / upload'、true ）;
xhr.send（formData）;
}
//成功上ا
関数uploadSuccess（event）{
if（xhr.readyState = == 4）{
console.log（xhr.responseText）;
}
}
//進行度条
functionsetProgress（event）{
if（event.lengthComputable）{
var complete = Number.parseInt（event.loaded / event.total * 100）; progress.innerHTML = complete +'％';
}
}
//画像プレビュー
関数previewImage（event）{
var reader = new FileReader（）;
reader.onload = function（event）{
image.src = event.target.result;
};
reader.readAsDataURL（event.target.files [0]）;
}
}）（）;
エクスプレスサーバーはファイルアップロードインターフェイスを提供します
const express = require（'express'）;
const upload = require（'multer'）（{dest：'uploads /'}）;
const path = require（'path' ）;
const fs = require（'fs'）;
const port = 8080;
let app = express（）;
app。 set（'port'、port）;
// index.html、index.jsは静的フォルダーに配置されます
app.use（express.static（path.join（__ dirname、'static'） ））;
app.get（'*'、（req、res）=＆gt; {
res.redirect（'index.html'）;
}）;
app.post（'/ upload'、upload.single（'test-upload'）、（req、res）=＆gt; {
//添付ファイルなし
if（！req.file）{
res.json（{ok：false}）;
return;
}
//ファイル情報を出力
console.log（'============================================ ==== ======='）;
console.log（' fieldname：'+ req.file.fieldname）;
console.log（'originalname：' + req.file.originalname）;
console.log（'encoding：' + req.file.encoding）;
console.log（'mimetype： '+ req.file.mimetype）;
console.log（' size：'+（req.file.size / 1024）.toFixed（2）+' KB'）;
console.log（ 'destination：' + req.file.destination）;
console.log（'filename：' + req.file.filename）;
console.log（'path：' + req.file.path ）;
//ファイルの名前を変更します
letoldPath = path.join（__ dirname、req.file.path）;
let newPath = path.join（__ dirname、'uploads /'+ req.file.originalname）;
fs.rename（oldPath、newPath、（err）=＆gt; {
if（err）{
res.json（{ok：false }）;
console.log（err）;
} else {
res.json（{ok：true}）;
}
}）;
}）;
app.listen（port、（）=＆gt; {
console.log（ "[Server] localhost：" + port）;
}）;
>
上記はこの記事の全内容です。この記事の内容が、皆さんの勉強や仕事に役立つことを願っています。また、応援よろしくお願いします*！
- CSS はどのように :focus 疑似クラスをハイパーリンクに適用しますか?
- html ハイパーリンクに他のスタイルを追加する方法
- css でハイパーリンクに異なる色を追加する方法
- DEDECMS は現在の列の最上位の列 ID をどのように呼び出しますか
- HTMLログイン後の空白ページの解決方法
- css で float プロパティを使用する方法
- HTMLで段落の最初の文字を左にフロートさせる方法
- HTMLで水平メニューを作成するために1列のハイパーリンクでfloatを使用する方法
- CSS float を使用してヘッダー、フッター、左目次を作成する方法
- HTMLで要素を配置する方法
- HTMLでテーブル要素を折りたたむように設定する方法
- CSSの単位は何ですか
- div cssでラインを実現する方法
- 下線CSSとHTMLタグの分析例
- CSSコードを使用してdivで単語と単語の間隔を実現する方法
- 使用方法 表示: テーブル; cssでimg画像の垂直方向のセンタリングを実現する
- css flex を使用して垂直方向のセンタリングを実現する方法
- css ですべての余白プロパティを設定する方法
- css を使用して li のスタイルを制御する方法
- CSS でテキストと画像をレイアウトする方法