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

LayUIのアップロードコンポーネントは、Webアプリケーションのファイルアップロードを簡素化します。舞臺裏でajaxを活用して、ユーザーにとってプロセスをシームレスにします。それを使用するには、最初にHTMLにLayUI CSSとJavaScriptファイルを含める必要があります。次に、特定の構(gòu)造と屬性を使用して、HTML內(nèi)のアップロード要素を定義する必要があります。この構(gòu)造には通常、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パラメーターは、サーバー側(cè)のアップロードスクリプトを指します。 doneコールバック関數(shù)は、成功したアップロードを処理し、 error障害を処理します。アップロードハンドラーの実際のURLを交換/upload/ことを忘れないでください。

LayUIのアップロードコンポーネントの共通構(gòu)成

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

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

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

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

LayUIのアップロードコンポーネントは、他のライブラリが行うのと同じように、進(jìn)捗イベントを直接提供しません。ただし、サーバー側(cè)のアップロードハンドラー內(nèi)で実裝することにより、進(jìn)捗監(jiān)視を?qū)g現(xiàn)できます。サーバー側(cè)のスクリプトは、定期的にプログレス更新をクライアントに送信する必要があります。その後、これらの更新を使用して、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ù)包含的信息，跟選擇的圖片信息有關(guān)layer.load(); //上傳loading } ,done: function(res, index, upload){ if(res.code == 0){ //上傳成功layer.msg('上傳成功'); } else { layer.msg('上傳失敗'); } layer.closeAll('loading'); //關(guān)閉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クラスまたはインラインスタイルを適用することで、ボタンの外観をカスタマイズすることもできます。コンポーネントの機能を壊さないように、既存の構(gòu)造を維持することを忘れないでください。より広範(fàn)なカスタマイズのために、LayUIソースコード自體を変更する必要がある場合があります。これは、ライブラリの構(gòu)造に完全に精通していない限り、一般的に推奨されません。ただし、ほとんどの視覚的調(diào)整には通常、カスタムCSSを使用するだけで十分です。

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