ファイルアップロードにLayUIのアップロードコンポーネントを使用します

LayUIのアップロードコンポーネントは、Webアプリケーションのファイルアップロードを簡素化します。舞臺裏でajaxを活用して、ユーザーにとってプロセスをシームレスにします。それを使用するには、最初にHTMLにLayUI CSSとJavaScriptファイルを含める必要があります。次に、特定の構造と屬性を使用して、HTML內(nèi)のアップロード要素を定義する必要があります。この構造には通常、LayUIがスタイルと対話するコンテナDIV內(nèi)に隠されたタイプfileの<input>要素が含まれます。最後に、JavaScriptコールでアップロードコンポーネントを開始し、その動作を制御するオプションを指定します。

これが基本的な例です。

 <code class="html"><div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="test1">選擇文件</button> <div class="layui-upload-list"> <ul id="demo1"></ul> </div> </div> <script> layui.use(&#39;upload&#39;, function(){ var upload = layui.upload; //執(zhí)行實例var uploadInst = upload.render({ elem: &#39;#test1&#39; //綁定元素,url: &#39;/upload/&#39; //上傳接口,done: function(res){ //上傳完畢回調(diào)console.log(res); } ,error: function(){ //請求異?；卣{(diào)console.log("Upload failed!"); } }); }); </script></code>

このコードスニペットには、基本的なアップロードボタンが表示されます。 urlパラメーターは、サーバー側のアップロードスクリプトを指します。 doneコールバック関數(shù)は、成功したアップロードを処理し、 error障害を処理します。アップロードハンドラーの実際のURLを交換/upload/ことを忘れないでください。

LayUIのアップロードコンポーネントの共通構成

LayUIのアップロードコンポーネントは、特定のニーズに合わせて動作を調(diào)整するためのいくつかの構成可能なオプションを提供します。これらのオプションはupload.render()関數(shù)のJavaScriptオブジェクトとして渡されます。最も一般的な構成には次のものがあります。

• elem ：これは、アップロードコンポーネントがバインドされるHTML要素を指定する必要なパラメーターです（たとえば、ボタンまたはDiv）。
• url ：これは、ファイルのアップロードを処理するサーバー側のスクリプトのURLです。これも必要なパラメーターです。
• accept ：このパラメーターは、許可されたファイルタイプ（例： image/* 、. .pdf 、 .txt ）を指定します。これにより、ユーザーがアップロードできるファイルの種類を制限するのに役立ちます。
• multiple ：これをtrueに設定すると、ユーザーはアップロードする複數(shù)のファイルを選択できます。
• auto ：これをfalseに設定すると、ファイルの選択後にアップロードが自動的に開始されません。これは、アップロードを開始する前に追加の検証またはユーザーインタラクションを追加する場合に役立ちます。
• exts ：許可されたファイル拡張子を指定します（例： ['jpg', 'png', 'gif'] ）。これはaccept代替手段です。
• size ： KBの最大許可されたファイルサイズを指定します。
• number ：ユーザーが選択できるファイルの數(shù)を制限します。

これらは、利用可能なオプションのほんの一部です。完全なリストについては、公式のLayUIドキュメントを參照してください。

LayUIのアップロードコンポーネントを使用して、アップロードの進行狀況とエラーの処理

LayUIのアップロードコンポーネントは、他のライブラリが行うのと同じように、進捗イベントを直接提供しません。ただし、サーバー側のアップロードハンドラー內(nèi)で実裝することにより、進捗監(jiān)視を?qū)g現(xiàn)できます。サーバー側のスクリプトは、定期的にプログレス更新をクライアントに送信する必要があります。その後、これらの更新を使用して、Progress Barまたはその他のフィードバックをユーザーに表示できます。 LayUI自體は、サーバーによって報告されたエラーを処理します。 upload.render()內(nèi)のerrorコールバック関數(shù)を使用して、これらのエラーを処理します。この関數(shù)は、引數(shù)としてエラーオブジェクトを受信します。これは、ユーザーフレンドリーなエラーメッセージのデバッグまたは表示に使用できます。

たとえば、より高度な実裝には次のものが含まれます。

 <code class="javascript">layui.use('upload', function(){ var upload = layui.upload; upload.render({ elem: '#test1' ,url: '/upload/' ,before: function(obj){ //obj參數(shù)包含的信息，跟選擇的圖片信息有關layer.load(); //上傳loading } ,done: function(res, index, upload){ if(res.code == 0){ //上傳成功layer.msg('上傳成功'); } else { layer.msg('上傳失敗'); } layer.closeAll('loading'); //關閉loading } ,error: function(index, upload){ layer.msg('上傳失敗'); layer.closeAll('loading'); } }); });</code>

この例では、レイヤー（別のLayUIモジュール）を使用して、読み込みと成功/失敗メッセージを表示します。

LayUIのアップロードコンポーネントの外観をカスタマイズします

LayUIのアップロードコンポーネントは獨自のCSSクラスを使用して、カスタマイズを比較的簡単にします。獨自のCSSルールを使用して、デフォルトのスタイルをオーバーライドできます。アップロードコンポーネント要素に関連付けられた特定のLayUI CSSクラス（ .layui-upload 、 .layui-upload-list 、 .layui-upload-btn ）をターゲットにします。また、HTML內(nèi)のボタン要素にカスタムCSSクラスまたはインラインスタイルを適用することで、ボタンの外観をカスタマイズすることもできます。コンポーネントの機能を壊さないように、既存の構造を維持することを忘れないでください。より広範なカスタマイズのために、LayUIソースコード自體を変更する必要がある場合があります。これは、ライブラリの構造に完全に精通していない限り、一般的に推奨されません。ただし、ほとんどの視覚的調(diào)整には通常、カスタムCSSを使用するだけで十分です。

以上がファイルアップロードにLayUIのアップロードコンポーネントを使用するにはどうすればよいですか？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。