Lauiui アップロード コンポーネントの使用方法を共有する
この記事では主に、layui アップロード コンポーネントの使用方法を説明します。まず、フロントエンド コードを貼り付けます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>产品特性Form</title>
<link href="~/Content/Base/layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="~/Content/Base/layui/layui.js" type="text/javascript"></script>
<script src="../../../../Content/Views/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../../Content/Views/js/framework-ui.js" type="text/javascript"></script>
<style>
@*table
{ height: 150px;
} .layui-form-label
{ width: 100px; }*@ </style></head><body>
<p style="width:100%;">
<p class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<p class="layui-upload-list">
<table class="layui-table" id="tableFile">
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</p>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</p>
</p>
<script>
function getModelName() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1);
strs = str.split("&"); for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
} return theRequest;
}; var parentUrlObj = getModelName(); var FileType = decodeURI(escape(parentUrlObj['filetype'])); var ModelId = decodeURI(escape(parentUrlObj['modelId'])); var NodeId = decodeURI(escape(parentUrlObj['nodeid'])); var ProductId = decodeURI(escape(parentUrlObj['productid']));
layui.use(['form', 'upload'], function () {
var form = layui.form,
upload = layui.upload; var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '/ModelList/uploadNodeAttributeFile?filetype=' + FileType + '&modelid=' + ModelId + '&nodeid=' + NodeId + '&productid=' + ProductId
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
, '<td>等待上传</td>'
, '<td>'
, '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
, '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
, '</td>'
, '</tr>'].join('')); //单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
}); //删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.Status == "success") { var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); return null;
} else { if (res.Message == "文件已存在") { var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传失败，文件已存在</span>'); return null;
} else { this.error(index, upload);
}
}
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
}); function heightTiao(nameid) {
var oIframe = window.top.document.getElementById(nameid); var oBody = document.getElementsByTagName("body")[0];
oIframe.style.height = oBody.offsetHeight + 40 + 'px';
}; </script></body></html>C#バックエンド受信コード
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;string str1 = AppDomain.CurrentDomain.SetupInformation.ApplicationBase;string imgPath = "";string fileName = "";fileName = hfc[0].FileName;imgPath = Server.MapPath("~/bin/" + fileName);imgPath = Server.MapPath("~/bin/" + modelId + "/" + productid + "/" + nodeid + "/" + filetype + "/" + fileName);hfc[0].SaveAs(imgPath);return Content(new AjaxResult { Status = ResultType.success, Message = "执行成功" }.ToJson()); 具体的な使用時に注意する必要があるのは、
auto: false
bindAction: '#testListAction'
この2つのパラメータは主にファイル選択時にファイルをアップロードしないように設定されています。アップロード アクションを実行するボタンを指定します
アップロード アクションを実行するためにファイルを選択する必要があるとします。auto を true に設定し、bindAction パラメーターを削除するだけです
その他のパラメーターについては、layui 公式 Web サイトのドキュメントを参照してください
ファイルのアップロードには判断が必要です。たくさんありますが、将来の使用を容易にするために例を記録します。
関連する推奨事項:
vue Alibaba Cloudアップロードコンポーネントの詳細説明
以上がLauiui アップロード コンポーネントの使用方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホット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）
ホットトピック
7411
15
1631
14
1358
52
1218
29
1196
24
NetEase Cloud Music を WeChat Moments に共有する方法_NetEase Cloud Music を WeChat Moments に共有するチュートリアル
Mar 25, 2024 am 11:41 AM
1. まず、NetEase Cloud Music に入り、ソフトウェアのホームページ インターフェイスをクリックして、曲の再生インターフェイスに入ります。 2. 次に、曲の再生インターフェイスで、下の図の赤いボックスに示すように、右上隅にある共有機能ボタンを見つけて、クリックして共有チャンネルを選択し、共有チャンネルで「共有先」オプションをクリックします。下部にある [WeChat Moments] を選択すると、コンテンツを WeChat Moments に共有できます。
Lauiuiでフォームデータを取得する方法
Apr 04, 2024 am 03:39 AM
layui は、フォームのすべてのフィールド データを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォーム データをシリアル化するなど、フォーム データを取得するためのさまざまなメソッドを提供します。これを AJAX リクエスト パラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。
Baidu Netdisk で友達とファイルを共有する方法
Mar 25, 2024 pm 06:52 PM
最近、Baidu Netdisk Android クライアントの新しいバージョン 8.0.0 がリリースされ、このバージョンには多くの変更が加えられただけでなく、多くの実用的な機能も追加されました。その中でも最も目を引くのがフォルダー共有機能の強化だ。ユーザーは簡単に友人を招待して仕事や生活で重要なファイルを共有できるようになり、より便利なコラボレーションと共有が実現します。では、友達と共有する必要があるファイルをどのように共有すればよいでしょうか? 以下では、このサイトの編集者が詳しく説明します。 1) Baidu Cloud APP を開き、まずホームページ上の関連フォルダーをクリックして選択し、次にインターフェイスの右上隅にある [...] アイコンをクリックします (以下を参照) 2) 次に、[+] をクリックします。 「共有メンバー」欄】を選択し、最後に全てにチェックを入れます
Lauiuiログインページでジャンプを設定する方法
Apr 04, 2024 am 03:12 AM
Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。
Lauiui が自己適応を実現する方法
Apr 26, 2024 am 03:00 AM
アダプティブ レイアウトは、layui フレームワークのレスポンシブ レイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブ レイアウト コンテナを定義し、layui-container クラスを設定します。レスポンシブ ブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッド システム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。
lauiとvueの違いは何ですか？
Apr 04, 2024 am 03:54 AM
Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブ コンポーネントを提供します。Vue は、データ バインディング、コンポーネント開発、および状態管理に重点を置いたフルスタック フレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキル レベルに応じて、適切なフレームワークを選択できます。
レイウイの実行方法
Apr 04, 2024 am 03:42 AM
layui を実行するには、次の手順を実行します: 1.layui スクリプトをインポートします; 2.layui を初期化します; 3.layui コンポーネントを使用します; 4.layui スタイルをインポートします (オプション); 5. スクリプトの互換性を確認し、その他の考慮事項に注意してください。これらの手順により、layui の機能を使用して Web アプリケーションを構築できます。
Lauiui フレームワークは何語ですか?
Apr 04, 2024 am 04:39 AM
layui フレームワークは、開発者が応答性の高い Web アプリケーションを迅速に構築できるようにする、使いやすい UI コンポーネントとツールのセットを提供する JavaScript ベースのフロントエンド フレームワークです。その機能には、モジュール式、軽量、応答性が高く、完全なドキュメントとコミュニティ サポートが含まれます。 layui は、管理バックエンド システム、電子商取引 Web サイト、モバイル アプリケーションの開発で広く使用されています。利点は迅速な起動、効率の向上、メンテナンスの容易さですが、欠点はカスタマイズの貧弱さと技術の更新の遅さです。
