jquery 구성 요소 WebUploader 파일 업로드 사용법에 대한 자세한 설명-PHP开发-php.cn

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

高洛峰

풀어 주다： 2016-12-07 14:32:27

원래의

2698명이 탐색했습니다.

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

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

jquery 구성 요소 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: &#39;js/Uploader.swf&#39;, // swf文件路径
 server: &#39;upload.php&#39;, // 文件接收服务端
 pick: &#39;#imgPicker&#39;, // 选择文件的按钮。可选
 // 只允许选择图片文件。
 accept: {
 title: &#39;Images&#39;,
 extensions: &#39;gif,jpg,jpeg,bmp,png&#39;,
 mimeTypes: &#39;image/*&#39;
 }
});

로그인 후 복사

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

uploader.on( &#39;fileQueued&#39;, function( file ) {
 var $list = $("#fileList"),
 $li = $(
  &#39;<div id="&#39; + file.id + &#39;" class="file-item thumbnail">&#39; +
  &#39;<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/676/307/619/1481092301585310.jpg"  class="lazy"  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( &#39;uploadProgress&#39;, function( file, percentage ) {
 var $li = $( &#39;#&#39;+file.id ),
 $percent = $li.find(&#39;.progress span&#39;);
   
 // 避免重复创建
 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();
});