ファイルアップロードスタイルの詳細を実装する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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
推薦する
Dreamweaver で Zen コーディングを使用する方法
前回の記事「Zen Coding: HTML/CSS コードを素早く記述する方法」を公開した後、一部...
Windows はリモート デスクトップが長時間自動的に切断されるのを防ぎます
Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...
純粋な CSS でカスタムラジオボタンとチェックボックス機能を実装する
1. 効果を達成する 2 知識ポイント2.1 <label> タグHTML では、<...
ウェブ開発におけるクロスドメインの理由に対する複数のソリューション
目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...
layui をベースにしたログインページの実装
この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...
優れたウェブフロントエンドデザインの指標
Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...
JavaScript でオブジェクトをエレガントに扱う 6 つの方法
目次序文1. オブジェクト.freeze() 2. オブジェクト.seal() 3. オブジェクト....
Linux がますます人気になっている 10 の理由
Linux はますます多くのユーザーに愛されてきました。なぜ Linux はこれほど急速に発展し、い...
Tomcat maxPostSize設定実装プロセス分析
1. maxPostSize を設定する理由は何ですか? tomcat コンテナには送信データのサイ...
mysqldump を使用した MySql のインポートおよびエクスポート方法の概要
データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...
Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート
マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...
du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法
Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...
MySQL準備原理の詳細な説明
準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...
mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題
cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...
適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析
<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...