ファイルアップロードスタイルの詳細を実装するjs
1. 概要
この js には、ボタン スタイル、リスト スタイル、削除、追加、ズーム (組み込みのズーム機能を使用して、ポップアップ ウィンドウを表示するための API を提供) が含まれています。
2. オブジェクト作成のパラメータ
使用コード例:
<div class="hj-file">
<input type="file" ファイル="" class="hj-file-input">
<div class="hj-box hj-append-item">
<div class="append-item margin-class">
<div class="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<!-- ボタン スタイルが有効になっていない場合、この外側の div は削除できます -->
<div class="hj-btn-box hj-hidden">
<div class="hj-btn">
画像を選択</div>
</div>
<!-- ファイル情報リスト-->
<div class="hj-file-list">
</div>
</div>
var ファイル = 新しいファイル({
最大ファイル長: 2,
最大ファイルサイズ: 1024,
ファイルサフィックス: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
停止ダイアログ: false、
表示ボタン:false
});
initHJFile(ファイル);
3. 監視例
//組み込みのポップアップ ウィンドウを使用しない場合は、ファイル オブジェクトの onlargeClickCallBack 関数をリッスンすることを選択できます。file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = 関数 (イベント) {}
file.callBack.onaddImgList = 関数 () {}
4. 使用方法
プロジェクト ディレクトリは上図のとおりです。使用したい場合は、プロジェクト パスに 5. ソースコードこのソースコードにはアイコンは含まれておらず、すべてが1つのHTMLページに含まれています。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
</head>
<スタイル>
* {
パディング: 0;
マージン: 0;
}
体 {
幅：100vw;
高さ：100vh;
/* ディスプレイ: flex;
コンテンツの中央揃え: 中央;
アイテムの位置を中央揃えにします。*/
}
/* 。箱 {
幅: 600ピクセル;
} */
.hjファイル{
幅: 100%;
/* 高さ: 100%; */
}
.hj-ファイル入力 {
表示: なし;
}
.hj-box {
ディスプレイ: フレックス;
flex-wrap: ラップ;
}
.append-item {
幅: 150ピクセル;
高さ: 150px;
境界線: 1px 破線 #b1b5bb;
境界線の半径: 5px;
背景色: #fbfdff;
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
マージン: 10px;
コンテンツの中央揃え: 中央;
}
.画像アイテム{
幅: 150ピクセル;
高さ: 150px;
境界線の半径: 5px;
マージン: 10px;
ディスプレイ: フレックス;
コンテンツの中央揃え: 中央;
アイテムの位置を中央揃えにします。
境界線: 1px実線 #eaedf1;
位置: 相対的;
背景サイズ: 100% 100%;
背景繰り返し: 繰り返しなし;
遷移: 1秒;
アニメーション: 翻訳者 1 秒;
}
.image-item-delete {
アニメーション: 下部トランスレータ .7 秒;
}
@keyframes トランスレータ {
0% {
不透明度: .2;
変換: translate(0, -50%);
}
100% {
不透明度: 1;
変換: translate(0);
}
}
@keyframes 下部トランスレータ {
0% {
不透明度: 1;
変換: translate(0, 0);
}
100% {
不透明度: .2;
変換: translate(0, 50%);
}
}
.img-push画像{
幅: 60ピクセル;
高さ: 60px;
}
.append-item:hover {
境界線の色: #00d2fc;
}
.マージンクラス {
下マージン: 20px;
}
。初め {
背景画像: url('./img/66.jpg');
}
.z-index-promote {
zインデックス: 3;
}
.largeImg 画像 {
カーソル: ポインタ;
幅: 30ピクセル;
高さ: 30px;
遷移: .6 秒;
表示: なし;
}
.deleteImg 画像 {
カーソル: ポインタ;
幅: 40px;
高さ: 40px;
表示: なし;
}
.image-item:hover::before {
コンテンツ： "";
zインデックス: 2;
背景色: #42393999;
幅: 100%;
位置: 絶対;
高さ: 100%;
境界線の半径: 5px;
遷移: .6 秒;
アニメーション: 透明度線形 .6 秒;
}
.image-item:hover .largeImg 画像 {
表示: ブロック;
アニメーション: 透明度線形 .6 秒;
}
.image-item:hover .deleteImg 画像 {
表示: ブロック;
アニメーション: 透明度線形 .6 秒;
}
@keyframes 透明度
0% {
不透明度: 0;
}
100% {
不透明度: 1;
}
}
.hj-シェード{
幅：100vw;
高さ：100vh;
背景色: #302d2d99;
位置: 固定;
オーバーフロー: 非表示;
zインデックス: 1978;
ディスプレイ: フレックス;
左: 50%;
上位: 50%;
変換: translate(-50%, -50%);
コンテンツの中央揃え: 中央;
アイテムの位置を中央揃えにします。
アニメーション: hj-shade-saccle .5s;
}
@keyframes hj-shade-shadow {
0% {
変換: 変換(-50%, -50%) スケール(0%);
}
100% {
変換: 変換(-50%, -50%) スケール(100%);
}
}
@keyframes hj-shade-hidden {
0% {
変換: 変換(-50%, -50%) スケール(100%);
}
100% {
変換: 変換(-50%, -50%) スケール(0%);
}
}
.hj-シェード-隠し{
アニメーション: hj-shade-hidden .5s;
}
.hj-シェード{
オーバーフロー:自動;
}
.hj-shade .hj-box {
幅: 60%;
高さ: 80%;
パディング: 20px 10px 10px 10px;
背景サイズ: 100% 100%;
背景色: 白;
}
.hj-shade .hj-box .hj-img {
幅: 100%;
オーバーフロー:自動;
高さ: 100%;
}
.hj-ファイルリスト .hj-ファイルリスト項目 {
背景色: 白;
色: #8cacb3;
ディスプレイ: フレックス;
行の高さ: 2;
フォントサイズ: 0.8em;
}
.hj-ファイルリスト .hj-ファイルリスト項目:hover {
背景色: #00d2fc70;
色: 白;
}
.hj-ファイルリスト .hj-ファイルリスト項目 .hj-left {
幅: 30%;
オーバーフロー: 非表示;
空白: ラップなし;
テキストオーバーフロー: 省略記号;
}
.hj-ファイルリスト .hj-ファイルリスト項目 .hj-左スパン {
左マージン: 20px;
カーソル: ポインタ;
}
.hj-ファイルリスト .hj-ファイルリスト項目 .hj-right {
幅: 30%;
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
コンテンツの正当化: 終了;
}
.hj-ファイルリスト .hj-ファイルリスト項目 .hj-right span {
右マージン: 20px;
}
.hj-ファイルリスト .hj-ファイルリスト項目 .hj-right img {
幅: 20px;
高さ: 20px;
カーソル: ポインタ;
}
@keyframes hj-list-hidden {
0% {
不透明度: 1;
}
100% {
不透明度: 0;
}
}
.hj-リスト-隠し{
アニメーション: hj-list-hidden .7s;
}
.hj-btn-box {
下部マージン: 25px;
}
.hj-btn-box .hj-btn {
左マージン: 20px;
カーソル: ポインタ;
背景色: #009efa;
幅: 30%;
行の高さ: 2;
境界線の半径: 4px;
色: 白;
フォントサイズ: 1.2em;
テキスト配置: 中央;
}
.hj-隠し{
表示: なし;
}
</スタイル>
<本文>
<div class="box">
<div class="hj-file">
<input type="file" ファイル="" class="hj-file-input">
<div class="hj-box hj-append-item">
<div class="append-item margin-class">
<div class="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<div class="hj-btn-box hj-hidden">
<div class="hj-btn">
画像を選択</div>
</div>
<div class="hj-file-list">
</div>
</div>
</div>
<スクリプト>
// ファイルコンストラクタ関数 File(obj) {
// ファイルの合計数 this.fileLength = 0;
// ファイル配列 this.fileList = [];
// オブジェクトパラメータ設定ファイル this.config = {
// 最大ファイル数 maxFileLength: obj.maxFileLength || 2,
// 最大ファイルサイズ maxFileSize: obj.maxFileSize || 1024,
// 許可されるファイルサフィックス fileSuffix: obj.fileSuffix || ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png'],
// デフォルトのポップアップウィンドウ StopDialog を開かないようにするかどうか: obj.StopDialog || false,
// ポップアップウィンドウのスタイルの幅と高さ shadeDialogStyle: obj.shade || [null, null],
// ボタンスタイルを有効にするかどうか showBtnImgStyle: obj.showBtn || false,
};
//fileDomに保存される唯一のDOMノード this.dom = {
// 入力ファイル選択入力ボックス dom
入力Dom: null、
// 追加項目クリックDOMを追加
イメージアイテムDom: null、
// 画像のDOMをhj-append-itemノードに追加する
追加アイテムDom: null、
// hj-file-listノードの後に画像リストのDOMを追加する
appendListDom: null、
};
// イベント処理オブジェクト this.event = {
// 項目追加クリックイベント処理 imageItemClick: () => {
クリックすると、入力した内容がリストされます。
},
// 画像イベント処理を選択した後の入力ファイル選択入力ボックス changeLoadFile: (file) => {
this.method.filterFile(file.target.files);
},
// 画像削除イベント imgDeleteClick: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
_before = this.fileList.slice(0, index == this.fileList.length ? index - 1 とします:
索引）;
_after = this.fileList.slice(index + 1); とします。
_before = _before.concat(_after);
// 画像を削除します this.method.deleteImg(id);
タイムアウトを設定する(() => {
this.fileList[インデックス].dom.remove();
this.fileList[インデックス].listDom.remove();
this.fileLength--;
this.fileList = _before;
}, 600);
壊す;
}
}
1
},
// 画像拡大イベント imgLargeClick: (id) => {
imgFile を this.privateUtils.foreachFileListToId(id) とします。
console.log(画像ファイル);
this.callBack.onlargeClickCallBack(imgFile、this);
if (this.config.StopDialog) が戻り値:
hjShadeDiv を document.getElementsByClassName('hj-shade') に設定します。
hjShadeDiv.length != 0 の場合、戻り値:
div = document.createElement('div'); とします。
div.className = 'hj-shade';
div2 = document.createElement('div'); とします。
div2.className = 'hj-box';
img = document.createElement('img'); とします。
img.className = 'hj-img';
img.src = imgFile.base64;
div2.appendChild(画像);
div.addEventListener('click', (イベント) => {
this.callBack.ondialogBeforeClose({
イベント: イベント、
画像ファイル: 画像ファイル、
});
div.className = div.className + 'hj-shade-hidden';
タイムアウトを設定する(() => {
document.body.removeChild(div);
}, 500);
})
// ボタンモードで最初の読み込みが完了しておらず高さが0になる異常な状況を防ぐ img.onload = () => {
div.appendChild(div2);
ドキュメントのbodyに子要素を追加します。
this.privateUtils.computeDialogWH(img、div2);
}
},
},
このメソッド = {
// 画像をフィルタリングする filterFile: (list) => {
for (let index = 0; index < list.length; index++) {
size = parseInt(list[index].size / 1024)とします。
接尾辞 = list[index].name.substring(list[index].name
.lastIndexOf('.') + 1);
// サフィックスに適合するかどうか let isTrue = false;
// ファイルサイズを決定する if (size > this.config.maxFileSize) {
console.log("ファイルが大きすぎます");
壊す;
}
(j = 0 とします; j < this.config.fileSuffix.length; j++) {
if (サフィックス == this.config.fileSuffix[j]) {
isTrue = 真;
壊す;
}
}
真の場合
id = parseInt(Math.random() * 100000); とします。
this.fileList.push({
id: id、
ファイル: リスト[インデックス],
base64: ''、
ドメイン: ''、
リストドメイン: ''、
});
console.log(このファイルリスト);
this.method.streamToImgBase64(リスト[インデックス]、id);
} それ以外 {
console.log("ファイル拡張子が一致しません");
}
}
},
// 画像表示処理 streamToImgBase64: (file, id) => {
var fileReader = 新しい FileReader();
fileReader.onload = (データ) => {
this.method.appendImage(data.target.result, id);
}
fileReader.readAsDataURL(ファイル);
},
// 画像をDOMノードに追加します appendImage: (url, id) => {
div = document.createElement('div'); とします。
div.className = '画像項目のマージンクラス';
div.style.backgroundImage = 'url(' + url + ')';
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
this.fileList[インデックス].dom = div;
this.fileList[インデックス].base64 = url;
壊す;
}
}
// DOM の作成と削除はすべて addEventListener を使用して行います
largeDom を document.createElement('div') にします。
largeDom.className = 'largeImg z-index-promote';
largeDom.innerHTML = `<img src="./img/big.png" alt="">`;
largeDom.addEventListener('クリック', () => {
イベント ID を取得する
})
deleteDom = document.createElement('div'); を作成します。
deleteDom.className = 'deleteImg z-index-promote';
deleteDom.innerHTML = `<img src="./img/delete.png" alt="">`;
deleteDom.addEventListener('click', () => {
this.event.imgDeleteClick(id);
})
div.appendChild(largeDom);
div.appendChild(Dom を削除)
div にアイテムを追加します。
this.fileLength++;
// 画像リストを追加します this.method.addImgList(id);
},
// 画像を削除する deleteImg: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
item = this.fileList[index]とします。
cless = item.dom.getAttribute('class'); とします。
clessList を item.listDom.getAttribute('class'); とします。
this.fileList[index].dom.setAttribute("class", cless + " image-item-delete");
this.fileList[index].listDom.setAttribute("class", clessList + " hj-list-hidden ")
壊す;
}
}
},
// 画像リストを追加 addImgList: (id) => {
ファイルを this.privateUtils.foreachFileListToId(id) とします。
this.callBack.onaddImgList(ファイル、this);
div = document.createElement('div'); とします。
div.className = 'hj-ファイルリスト項目'
div$left = document.createElement('div'); とします。
div$right = document.createElement('div'); とします。
ファイル$img = document.createElement('img');
fileSize を this.privateUtils.computeFileSize(file.file.size) とします。
ファイル$img.src = './img/delete-balck.png';
div$left.className = 'hj-left';
div$right.className = 'hj-right';
div$left.innerHTML = `<span>${file.file.name}</span>`
div$right.innerHTML = `<span>${fileSize}</span>`;
div$left.addEventListener('click', () => {
イベント ID を取得する
})
ファイル$img.addEventListener('click', () => {
this.event.imgDeleteClick(id);
})
div$right.appendChild(ファイル$img);
div.appendChild(div$left);
div.appendChild(div$right);
for (let index = 0; index < this.fileList.length; index++) {
if (id == this.fileList[index].id) {
this.fileList[インデックス].listDom = div;
壊す;
}
}
this.dom.appendListDom.appendChild(div);
},
}
// 公開された監視 API
this.callBack = {
// デフォルトのポップアップウィンドウが開かないようにする onlargeClickCallBack: (img, that) => {},
// 組み込みポップアップウィンドウが閉じられたときのコールバック // {event: クリックのソースイベントオブジェクト imgFile: 閉じられる画像のグローバルファイルオブジェクト情報}
ondialogBeforeClose: (オブジェクト) => {},
// 画像リストが追加されるたびにコールバック onaddImgList: (file, that) => {},
},
this.privateUtils = {
foreachFileListToId: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (id == this.fileList[index].id) {
this.fileList[index]を返します。
}
}
},
ファイルサイズを計算する: (サイズ) => {
結果をparseInt(size / 1024)とします。
（結果<1024）の場合{
結果 + '.KB' を返します。
} そうでない場合 (結果 >= 1024) {
parseInt(result / 1024) + ".MB" を返します。
}
},
// ポップアップウィンドウの高さと長さを計算します。computeDialogWH: (img, dom) => {
w = this.config.shadeDialogStyle[0] とします。
h = this.config.shadeDialogStyle[1]とします。
w2 = img.naturalWidth とします。
h2 = img.naturalHeight とします。
if (w2 > window.innerWidth * 0.9) {
w2 = ウィンドウの内側の幅 * 0.7;
h2 = ウィンドウの内側の高さ * 0.7;
}
dom.style.width = w == null ? w2 + "px" : w;
dom.style.height = h == null ? h2 + "px" : h;
}
}
}
var ファイル = 新しいファイル({
最大ファイル長: 2,
最大ファイルサイズ: 1024,
ファイルサフィックス: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
停止ダイアログ: false、
表示ボタン:false
});
initHJFile(ファイル);
// 組み込みのポップアップ ウィンドウを使用しない場合は、ファイル オブジェクトの onlargeClickCallBack 関数をリッスンすることを選択できます。file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = 関数 (イベント) {}
file.callBack.onaddImgList = 関数 () {}
// DOMノードの追加などの初期情報をロードする function initHJFile(file) {
console.log(ファイル);
input_dom = document.getElementsByClassName('hj-file-input')[0] とします。
imageItem_dom = document.getElementsByClassName('append-item')[0] とします。
appendItem_dom = document.getElementsByClassName('hj-append-item')[0] とします。
appendList_dom = document.getElementsByClassName('hj-file-list')[0] とします。
ファイル.dom.inputDom = input_dom;
file.dom.imageItemDom = imageItem_dom;
ファイル.dom.appendListDom = appendList_dom;
if (file.config.showBtnImgStyle) {
// ボタン モードをオンにします appendItem_dom.style.display = 'none';
btn = document.getElementsByClassName('hj-btn-box');
コンソールにログ出力します。
btn.length != 0 の場合
btn[0].className = 'hj-btn-box';
btn[0].children[0].addEventListener('click', file.event.imageItemClick);
} それ以外 {
console.log("btn クラスが見つかりません");
新しいエラーをスローします('ボタン モードに必要な HTML が定義されていません')
}
}
ファイル.dom.appendItemDom = appendItem_dom;
file.dom.imageItemDom.addEventListener('クリック', file.event.imageItemClick);
file.dom.inputDom.addEventListener('change', file.event.changeLoadFile)
}
</スクリプト>
</本文>
</html>
js でファイルアップロードスタイルを実装する詳細に関するこの記事はこれで終わりです。js でファイルアップロードスタイルを実装する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
推薦する
win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する
Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...
Vueでeslintを使用する方法の詳細な説明
目次1. 説明2. 関連する依存パッケージをダウンロードする3. 設定ファイル .eslintrc....
JS正規RegExpオブジェクトについての簡単な説明
目次1. RegExpオブジェクト2. 文法2.1 定義2.2 修飾子2.3 角括弧2.4 メタ文字...
MySQL 正規表現 (regexp と rlike) の検索機能の例分析
この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...
MySQL はリレーショナルデータベースですか?
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...
Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード
1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...
DockerコンテナにNFS共有ディレクトリをマウントする実装
以前、https://www.jb51.net/article/205922.htm で、Docke...
HTML フォームとフォーム内部タグの使用
コードをコピーコードは次のとおりです。 <html> <ヘッド> <t...
Oracle Rownum 書き込みに似た MySQL の詳細な例
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
MySQL クエリの重複データ (重複データを削除し、ID が最も小さいデータのみを保持します)
開発の背景:最近、私はバッチ データを MySQL データベースにインポートする機能に取り組んでいま...
ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図
目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...
Vue-router は現在の場所 (/path) へのナビゲーションを許可しません。エラーの原因と修正
目次エラーメッセージ原因エラーのデモンストレーション回避策方法1方法2方法3エラーメッセージ現在の場...
MySQLデータベースがNULLを可能な限り避ける理由
MySQL の多くのテーブルには、NULL が列のデフォルト属性であるため、アプリケーションが NU...
Tomcat および Web アプリケーションの Docker デプロイメントの実装
1.dockerをオンラインでダウンロードする yum インストール -y epel-release...
CSS トップに戻る コード例
最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...