파일 업로드에 Layui의 업로드 구성 요소를 어떻게 사용합니까?

파일 업로드에 Layui의 업로드 구성 요소를 사용합니다

Layui의 업로드 구성 요소는 웹 애플리케이션에서 파일 업로드를 단순화합니다. 무대 뒤에서 Ajax를 활용하여 사용자에게 프로세스를 원활하게 만듭니다. 이를 사용하려면 먼저 HTML에 Layui CSS 및 JavaScript 파일을 포함해야합니다. 그런 다음 특정 구조 및 속성을 사용하여 HTML 내에서 업로드 요소를 정의해야합니다. 이 구조에는 일반적으로 Layui가 스타일링하고 상호 작용할 컨테이너 DIV 내에 숨겨진 <input> file 요소가 포함됩니다. 마지막으로 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의 업로드 구성 요소는 다른 라이브러리와 같은 방식으로 진행 상황을 직접 제공하지 않습니다. 그러나 서버 측 업로드 핸들러 내에서이를 구현하여 진행 상황 모니터링을 달성 할 수 있습니다. 서버 측 스크립트는 정기적으로 클라이언트에 진행 업데이트를 다시 전송해야합니다. 그런 다음이 업데이트를 사용하여 진행률 표시 줄이나 다른 피드백을 사용자에게 표시 할 수 있습니다. 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-upload , .layui-upload-list , .layui-upload-btn )와 관련된 특정 layui css 클래스를 타겟팅하십시오. HTML 내의 사용자 정의 CSS 클래스 또는 인라인 스타일을 적용하여 버튼의 모양을 사용자 정의 할 수도 있습니다. 구성 요소의 기능을 깨지 않도록 기존 구조를 유지해야합니다. 보다 광범위한 사용자 정의를 위해서는 LAYUI 소스 코드 자체를 수정해야 할 수도 있습니다. 라이브러리 구조에 완전히 익숙하지 않으면 일반적으로 권장되지 않습니다. 그러나 사용자 정의 CSS를 사용하면 일반적으로 대부분의 시각적 조정에 충분합니다.

위 내용은 파일 업로드에 Layui의 업로드 구성 요소를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!