jquery 구성 요소 WebUploader 파일 업로드 사용법에 대한 자세한 설명

WebUploader는 Baidu WebFE(FEX) 팀이 개발한 간단하고 현대적인 파일 업로드 구성 요소로, 주로 HTML5를 기반으로 하며 FLASH로 보완됩니다. 아래에서는 jquery WebUploader 파일 업로드 구성 요소의 사용법을 보여 드리겠습니다.

WebUploader를 사용하면 파일 일괄 업로드, 썸네일 지원 등 다양한 매개변수 옵션을 설정할 수 있으며, 여러 이벤트 메소드를 원하는 대로 호출할 수 있습니다. 좋다.

다음으로는 사진 업로드 예시를 통해 WebUploader 사용법을 설명하겠습니다.

HTML

먼저 CSS 및 관련 js 파일을 로드합니다.

<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/webuploader.min.js"></script>

그런 다음 추가된 파일 정보 목록을 저장할 #imgPicker 버튼과 #fileList 컨테이너를 준비해야 합니다. 본문 코드에 다음을 추가합니다. :

<div id="uploadimg">
 <div id="fileList" class="uploader-list"></div>
 <div id="imgPicker">选择图片</div>
</div>

JAVASCRIPT

먼저 Web Uploader 인스턴스를 만듭니다.

var uploader = WebUploader.create({
 auto: true, // 选完文件后，是否自动上传
 swf: 'js/Uploader.swf', // swf文件路径
 server: 'upload.php', // 文件接收服务端
 pick: '#imgPicker', // 选择文件的按钮。可选
 // 只允许选择图片文件。
 accept: {
 title: 'Images',
 extensions: 'gif,jpg,jpeg,bmp,png',
 mimeTypes: 'image/*'
 }
});

그런 다음 fileQueued 이벤트를 수신합니다. 즉, 파일이 추가되면 uploader.makeThumb을 통해 이미지 미리보기를 생성합니다.

uploader.on( 'fileQueued', function( file ) {
 var $list = $("#fileList"),
 $li = $(
  &#39;<div id="&#39; + file.id + &#39;" class="file-item thumbnail">&#39; +
  &#39;<img  alt="jquery 구성 요소 WebUploader 파일 업로드 사용법에 대한 자세한 설명" >&#39; +
  &#39;<div class="info">&#39; + file.name + &#39;</div>&#39; +
  &#39;</div>&#39;
  ),
 $img = $li.find(&#39;img&#39;);
  
  
 // $list为容器jQuery实例
 $list.append( $li );
  
 // 创建缩略图
 uploader.makeThumb( file, function( error, src ) {
 if ( error ) {
  $img.replaceWith(&#39;<span>不能预览</span>&#39;);
  return;
 }
  
 $img.attr( &#39;src&#39;, src );
 }, 100, 100 ); //100x100为缩略图尺寸
});

마지막으로 파일 업로드가 완료되면 업로드 성공, 업로드 실패, 업로드 완료라는 메시지가 뜹니다. 각각 uploadProgress, uploadSuccess,
uploadError, uploadComplete 이벤트에 해당합니다.

// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
 var $li = $( '#'+file.id ),
 $percent = $li.find('.progress span');
  
 // 避免重复创建
 if ( !$percent.length ) {
 $percent = $(&#39;<p class="progress"><span></span></p>&#39;)
  .appendTo( $li )
  .find(&#39;span&#39;);
 }
  
 $percent.css( &#39;width&#39;, percentage * 100 + &#39;%&#39; );
});
  
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( &#39;uploadSuccess&#39;, function( file, res ) {
 console.log(res.filePath);//这里可以得到上传后的文件路径
 $( &#39;#&#39;+file.id ).addClass(&#39;upload-state-done&#39;);
});
  
// 文件上传失败，显示上传出错。
uploader.on( &#39;uploadError&#39;, function( file ) {
 var $li = $( &#39;#&#39;+file.id ),
 $error = $li.find(&#39;div.error&#39;);
  
 // 避免重复创建
 if ( !$error.length ) {
 $error = $(&#39;<div class="error"></div>&#39;).appendTo( $li );
 }
  
 $error.text(&#39;上传失败&#39;);
});
  
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( &#39;uploadComplete&#39;, function( file ) {
 $( &#39;#&#39;+file.id ).find(&#39;.progress&#39;).remove();
});

이 시점에서는 "이미지 선택"을 클릭하면 파일 선택 대화 상자가 팝업되는 간단한 이미지 업로드 예를 구현했습니다. 그 후, 이미지를 업로드하는 과정이 시작되고, 이미지에 해당하는 썸네일이 목록에 표시됩니다.

공통 옵션 설정 및 이벤트 호출

Web Uploader는 풍부한 API 옵션 설정 및 이벤트 호출을 제공합니다.

자주 사용되는 이벤트 설명: