# 文件上傳 零云默認使用了百度的webuploader插件來實現文件上傳，除了使用這個，當然你也可以自己使用自己熟悉的插件，插件請放到/Application/當前模塊/View/Public/libs目錄下然后用__LIBS__/test.min.js調用 ## 說明 如果在一個頁面中有2個以上上傳按鈕，請注意修改按鈕的唯一ID不要沖突。  ## 示例 ```html <extend name="$_home_public_layout"/> <block name="style"> <style type="text/css"> #preview-pane .preview-container { width: 200px; height: 200px; overflow: hidden; } </style> </block> <block name="main"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-9"> <div class="panel panel-default"> <div class="panel-body"> <div class="m-t-md"> <h4>上傳自定義頭像</h4> <form method="post" action="{:U('User/Center/avatar')}" class="avatar-form"> <div class="form-group"> <div id="crop-pane" class="row"> <div id="upload_list" class="uploader-list col-xs-12 img-box"> <div id="upload_preview" class="col-md-4 file-item thumbnail m-b-xs"> <img class="crop" src=""> </div> </div> </div> </div> <div class="form-group"> <input type="hidden" name="avatar" id="upload-avatar-src"> <a id="upload-avatar-button" class="btn btn-primary m-b">上傳頭像按鈕</a> <button type="submit" class="submit btn btn-success m-b ajax-posts" target-form="avatar-form">保存頭像</button> </div> </form> </div> </div> </div> </div> </div> </div> </block> <block name="script"> <script type="text/javascript" src="__PUBLIC__/libs/webuploader/webuploader.min.js"></script> <script type="text/javascript"> $(function(){ // 上傳頭像 var uploader = WebUploader.create({ withCredentials: true, auto: true, duplicate: true, server: '{:U(MODULE_MARK."/Upload/upload", array("temp" => "true"), true, true)}', pick: '#upload-avatar-button', resize: false, fileNumLimit: 20, fileSingleSizeLimit: "<php> echo C('UPLOAD_FILE_SIZE') ? : 2; </php>*1024*1024", accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png' } }); // 文件上傳過程中創建進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) { $( '#upload_preview').removeClass('hidden'); var $li = $('#upload_preview'), $percent = $li.find('.progress .progress-bar'); // 避免重復創建 if ( !$percent.length ) { $percent = $('<div class="progress"><div class="progress-bar"></div></div>').appendTo( $li ).find('.progress-bar'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 完成上傳完了，成功或者失敗，先刪除進度條。 uploader.on( 'uploadComplete', function( file ) { $( '#upload_preview' ).find('.progress').remove(); }); // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。 uploader.on( 'uploadSuccess', function( file , response) { $( '#upload_preview' ).addClass('upload-state-done'); if(eval('response').status == 0){ $.alertMessager(response.info); } else { $( '#upload-avatar-src' ).attr('value', response.id); // 上傳成功后會得到圖片ID把這個ID設置到表單里，下一步提交。 $( '#upload_preview img').attr('src', response.url); // 預覽圖片 } }); }); </script> </block> ```