ファイルアップロードにLayUIのアップロードコンポーネントを使用するにはどうすればよいですか？

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

LayUIのアップロードコンポーネントは、Webアプリケーションのファイルアップロードを簡素化します。舞台裏でajaxを活用して、ユーザーにとってプロセスをシームレスにします。それを使用するには、最初にHTMLにLayUI CSSとJavaScriptファイルを含める必要があります。次に、特定の構造と属性を使用して、HTML内のアップロード要素を定義する必要があります。この構造には通常、LayUIがスタイルと対話するコンテナDIV内に隠されたタイプ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; //执行实例var uploadInst = upload.render({ elem: &#39;#test1&#39; //绑定元素,url: &#39;/upload/&#39; //上传接口,done: function(res){ //上传完毕回调console.log(res); } ,error: function(){ //请求异常回调console.log("Upload failed!"); } }); }); </script></code>

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

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

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

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

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

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

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

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

 <code class="javascript">layui.use('upload', function(){ var upload = layui.upload; upload.render({ elem: '#test1' ,url: '/upload/' ,before: function(obj){ //obj参数包含的信息，跟选择的图片信息有关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内のボタン要素にカスタムCSSクラスまたはインラインスタイルを適用することで、ボタンの外観をカスタマイズすることもできます。コンポーネントの機能を壊さないように、既存の構造を維持することを忘れないでください。より広範なカスタマイズのために、LayUIソースコード自体を変更する必要がある場合があります。これは、ライブラリの構造に完全に精通していない限り、一般的に推奨されません。ただし、ほとんどの視覚的調整には通常、カスタムCSSを使用するだけで十分です。

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