TP5用webuploader实现图片上传
        【摘要】 
                    PHP模板解析路径问题 
首先,配置文件添加代码 位置:application/config.php 
return [    'admin' => '/static/admin',], 
其次,php中读取配置文件 
$admin = config('admin');或者$admin = config("view_replace...
    
    
    
    PHP模板解析路径问题
首先,配置文件添加代码
 位置:application/config.php
  
   - 
    
     
    
    
     
      return [
     
    
- 
    
     
    
    
         'admin' => '/static/admin',
     
    
- 
    
     
    
    
     
      ],
     
    
 其次,php中读取配置文件
  
   - 
    
     
    
    
     
      $admin = config('admin');
     
    
- 
    
     
    
    
     
      或者
     
    
- 
    
     
    
    
     
      $admin = config("view_replace_str.__ADMIN__"); //重点推荐
     
    
- 
    
     
    
    
     
      <script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script>
     
    
 整合TP5
1、引入CSS文件
  
   - 
    
     
    
    
     
      <link href="__ADMIN__/plugins/webuploader-0.1.5/webuploader.css" rel="stylesheet">
     
    
- 
    
     
    
    
     
      <script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.min.js"></script>
     
    
 2、初始化
  
   - 
    
     
    
    
     
      $(document).ready(function(){
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
             // Bootstrap fileinput插件初始化
     
    
- 
    
     
    
    
     
              $('#file-zh').fileinput({
     
    
- 
    
     
    
    
               language: 'zh',
     
    
- 
    
     
    
    
               uploadUrl: '#',
     
    
- 
    
     
    
    
               allowedFileExtensions: ['jpg', 'png', 'gif'],
     
    
- 
    
     
    
    
     
              });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
             // 初始化Web Uploader
     
    
- 
    
     
    
    
     
              uploader = WebUploader.create({
     
    
- 
    
     
    
    
                 pick: {
     
    
- 
    
     
    
    
                     id: '#filePicker-2',
     
    
- 
    
     
    
    
                     label: '点击选择图片'
     
    
- 
    
     
    
    
     
                  },
     
    
- 
    
     
    
    
                 formData: {
     
    
- 
    
     
    
    
                     uid: 123
     
    
- 
    
     
    
    
     
                  },
     
    
- 
    
     
    
    
                 dnd: '#dndArea',
     
    
- 
    
     
    
    
                 paste: '#uploader',
     
    
- 
    
     
    
    
                 swf: '__ADMIN__/plugins/webuploader-0.1.5/Uploader.swf',
     
    
- 
    
     
    
    
                 chunked: false,
     
    
- 
    
     
    
    
                 chunkSize: 512 * 1024,
     
    
- 
    
     
    
    
                 server: 'http://webuploader.duapp.com/server/fileupload.php',
     
    
- 
    
     
    
    
                 // runtimeOrder: 'flash',
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                 accept: {
     
    
- 
    
     
    
    
                     title: 'Images',
     
    
- 
    
     
    
    
                     extensions: 'gif,jpg,jpeg,bmp,png',
     
    
- 
    
     
    
    
                     mimeTypes: 'image/*'
     
    
- 
    
     
    
    
     
                  },
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                 // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
     
    
- 
    
     
    
    
                 disableGlobalDnd: true,
     
    
- 
    
     
    
    
                 fileNumLimit: 300,
     
    
- 
    
     
    
    
                 fileSizeLimit: 200 * 1024 * 1024,    // 200 M
     
    
- 
    
     
    
    
                 fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
     
    
- 
    
     
    
    
     
              });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      });
     
    
 
 3、修改common.php
位置:\application\admin\common.php
  
   - 
    
     
    
    
     
      function images($fieldinfo){
     
    
- 
    
     
    
    
         //字段名
     
    
- 
    
     
    
    
     
          $field = $fieldinfo['field'];
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
          $str = <<<EOF
     
    
- 
    
     
    
    
     
              <div class="uploader-list-container">
     
    
- 
    
     
    
    
                 <div class="queueList">
     
    
- 
    
     
    
    
                     <div id="dndArea" class="placeholder">
     
    
- 
    
     
    
    
                         <div id="filePicker-2"></div>
     
    
- 
    
     
    
    
                         <p>或将图片拖到这里,单次最多可选10张</p>
     
    
- 
    
     
    
    
                     </div>
     
    
- 
    
     
    
    
                 </div>
     
    
- 
    
     
    
    
                 <div class="statusBar" style="display:none;">
     
    
- 
    
     
    
    
                     <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
     
    
- 
    
     
    
    
                     <div class="info"></div>
     
    
- 
    
     
    
    
                     <div class="btns">
     
    
- 
    
     
    
    
                         <div id="filePicker2"></div>
     
    
- 
    
     
    
    
                         <div class="uploadBtn">开始上传</div>
     
    
- 
    
     
    
    
                     </div>
     
    
- 
    
     
    
    
                 </div>
     
    
- 
    
     
    
    
             </div>
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
             <script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script>
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      EOF;
     
    
- 
    
     
    
    
     
          return $str;
     
    
- 
    
     
    
    
     
      }
     
    
- 
    
     
    
    
     
    
 
 4、控制器
  
   - 
    
     
    
    
     
      //多图片或多文件上传
     
    
- 
    
     
    
    
     
      public function upload_images(){
     
    
- 
    
     
    
    
         $file = request()->file('file');
     
    
- 
    
     
    
    
         $info = $file->move(ROOT_PATH . 'public/uploads');
     
    
- 
    
     
    
    
         if($info) {
     
    
- 
    
     
    
    
             return json_encode($info->getSaveName());
     
    
- 
    
     
    
    
     
          }
     
    
- 
    
     
    
    
     
      }
     
    
 5、上传限制(图片个数和类型)
首先,图片个数
$maxnumber = $setting['maxnumber'];
 有两个地方需要设置
  
   - 
    
     
    
    
     
      <div class="queueList">
     
    
- 
    
     
    
    
         <div id="dndArea" class="placeholder">
     
    
- 
    
     
    
    
             <div id="filePicker-2"></div>
     
    
- 
    
     
    
    
             <p>或将图片拖到这里,单次最多可选 $maxnumber 张</p>
     
    
- 
    
     
    
    
         </div>
     
    
- 
    
     
    
    
     
      </div>
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      // 实例化
     
    
- 
    
     
    
    
     
      uploader = WebUploader.create({
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
         // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
     
    
- 
    
     
    
    
         disableGlobalDnd: true,
     
    
- 
    
     
    
    
         fileNumLimit: $maxnumber,
     
    
- 
    
     
    
    
         fileSizeLimit: 200 * 1024 * 1024,    // 200 M
     
    
- 
    
     
    
    
         fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
     
    
- 
    
     
    
    
     
      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      //上传成功返回文件名
     
    
- 
    
     
    
    
     
      uploader.on('uploadSuccess', function(file,response){
     
    
- 
    
     
    
    
         alert(response);
     
    
- 
    
     
    
    
     
      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      // 上传错误提示
     
    
- 
    
     
    
    
     
      uploader.onError = function( code ) {
     
    
- 
    
     
    
    
         if(code == "Q_EXCEED_NUM_LIMIT") {
     
    
- 
    
     
    
    
     
             layer.alert("只能上传 $maxnumber 张图片");
     
    
- 
    
     
    
    
     
          } else if(code == "F_DUPLICATE") {
     
    
- 
    
     
    
    
     
             layer.alert("重复上传");
     
    
- 
    
     
    
    
     
          } else {
     
    
- 
    
     
    
    
     
              layer.alert("错误代码:" + code);
     
    
- 
    
     
    
    
     
          }
     
    
- 
    
     
    
    
     
      };
     
    
 
 其次,图片类型
  
   - 
    
     
    
    
     
      $allowext = $setting['allowext'];
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      // 实例化
     
    
- 
    
     
    
    
     
      uploader = WebUploader.create({
     
    
- 
    
     
    
    
     
          pick: {
     
    
- 
    
     
    
    
     
              id: '#filePicker-2',
     
    
- 
    
     
    
    
     
              label: '点击选择图片'
     
    
- 
    
     
    
    
     
          },
     
    
- 
    
     
    
    
     
          formData: {
     
    
- 
    
     
    
    
     
              uid: 123
     
    
- 
    
     
    
    
     
          },
     
    
- 
    
     
    
    
     
          dnd: '#dndArea',
     
    
- 
    
     
    
    
     
          paste: '#uploader',
     
    
- 
    
     
    
    
     
          swf: '$admin/plugins/webuploader-0.1.5/Uploader.swf',
     
    
- 
    
     
    
    
     
          chunked: false,
     
    
- 
    
     
    
    
     
          chunkSize: 512 * 1024,
     
    
- 
    
     
    
    
     
          server: '$url',
     
    
- 
    
     
    
    
         // runtimeOrder: 'flash',
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
          accept: {
     
    
- 
    
     
    
    
     
              title: 'Images',
     
    
- 
    
     
    
    
     
              extensions: '$allowext',
     
    
- 
    
     
    
    
     
              mimeTypes: 'image/*'
     
    
- 
    
     
    
    
     
          },
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
         // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
     
    
- 
    
     
    
    
     
          disableGlobalDnd: true,
     
    
- 
    
     
    
    
     
          fileNumLimit: $maxnumber,
     
    
- 
    
     
    
    
     
          fileSizeLimit: 200 * 1024 * 1024,    // 200 M
     
    
- 
    
     
    
    
     
          fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
     
    
- 
    
     
    
    
     
      });
     
    
 
 6、保存到数据库
思路:异步发送到控制器,控制器上传成功,则返回文件名;前端添加隐藏表单,把这个文件名作为属性隐藏起来;统一提交到数据库保存
  
   - 
    
     
    
    
     
      <input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control">
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      //上传成功返回文件名
     
    
- 
    
     
    
    
     
      uploader.on('uploadSuccess', function(file,response){
     
    
- 
    
     
    
    
         var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
     
    
- 
    
     
    
    
     
          $('#info_$field').val( images_value + response);
     
    
- 
    
     
    
    
     
      });
     
    
 完善WebUploader相关功能
(一)图片上传成功显示删除按钮
思路:修改common.php
  
   - 
    
     
    
    
     
      file.on('statuschange', function( cur, prev ) {
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
         if ( prev === 'progress' ) {
     
    
- 
    
     
    
    
     
              prgress.hide().width(0);
     
    
- 
    
     
    
    
     
          } else if ( prev === 'queued' ) {
     
    
- 
    
     
    
    
     
              //li.off( 'mouseenter mouseleave' ); //解除事件监听
     
    
- 
    
     
    
    
     
              //btns.remove();
     
    
- 
    
     
    
    
     
              li.find( 'span.rotateLeft' ).remove(); //移除左旋转按钮
     
    
- 
    
     
    
    
     
              li.find( 'span.rotateRight' ).remove(); //移除右旋转按钮
     
    
- 
    
     
    
    
     
          }
     
    
- 
    
     
    
    
     
      });
     
    
 (二)执行删除操作
思路:把上传成功的图片路径赋值给图片
  
   - 
    
     
    
    
     
      $delete_url = url('delete_file');
     
    
- 
    
     
    
    
     
      var img_src = li.attr('studyfox_img');
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      // 负责view的销毁
     
    
- 
    
     
    
    
     
      function removeFile( file ) {
     
    
- 
    
     
    
    
         var li = $('#'+file.id);
     
    
- 
    
     
    
    
         var img_src = li.attr('studyfox_img');
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
         delete percentages[ file.id ];
     
    
- 
    
     
    
    
         updateTotalProgress();
     
    
- 
    
     
    
    
     
          li.off().find('.file-panel').off().end().remove();
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
         //后台删除图片
     
    
- 
    
     
    
    
     
          $.ajax({
     
    
- 
    
     
    
    
             url: '$delete_url',
     
    
- 
    
     
    
    
             type: 'POST',
     
    
- 
    
     
    
    
             data: {'img': img_src},
     
    
- 
    
     
    
    
             success: function(result, textStatus){
     
    
- 
    
     
    
    
                 alert(textStatus);
     
    
- 
    
     
    
    
                 alert(result);
     
    
- 
    
     
    
    
     
              }
     
    
- 
    
     
    
    
     
          });
     
    
- 
    
     
    
    
     
      }
     
    
 
 上传成功返回文件名
  
   - 
    
     
    
    
     
      uploader.on('uploadSuccess', function(file,response){
     
    
- 
    
     
    
    
         var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
     
    
- 
    
     
    
    
     
          $('#info_$field').val( images_value + response);
     
    
- 
    
     
    
    
         //在当前图片LI里添加图片地址
     
    
- 
    
     
    
    
     
          $('#'+file.id).attr('studyfox_img',response);
     
    
- 
    
     
    
    
     
      });
     
    
 
  
   - 
    
     
    
    
     
      //删除文件或图片
     
    
- 
    
     
    
    
     
      public function delete_file(){
     
    
- 
    
     
    
    
         $delete_url = input('img');
     
    
- 
    
     
    
    
         try {
     
    
- 
    
     
    
    
     
            unlink(ROOT_PATH . 'public/uploads/' . $delete_url);  //删除成功返回1
     
    
- 
    
     
    
    
     
          } catch (Exception $e) { }
     
    
- 
    
     
    
    
     
      }
     
    
 完整代码
  
   - 
    
     
    
    
     
      function images($fieldinfo){
     
    
- 
    
     
    
    
     
          //字段名
     
    
- 
    
     
    
    
     
          $field = $fieldinfo['field'];
     
    
- 
    
     
    
    
     
          $url = url('upload_images');
     
    
- 
    
     
    
    
     
          $delete_url = url('delete_file');
     
    
- 
    
     
    
    
     
          //反序列化设置项
     
    
- 
    
     
    
    
     
          $setting = unserialize($fieldinfo['setting']);
     
    
- 
    
     
    
    
     
          $allowext = $setting['allowext'];
     
    
- 
    
     
    
    
     
          $maxnumber = $setting['maxnumber'];
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
          $str = <<<EOF
     
    
- 
    
     
    
    
     
              <input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control">
     
    
- 
    
     
    
    
             <div class="uploader-list-container">
     
    
- 
    
     
    
    
                 <div class="queueList">
     
    
- 
    
     
    
    
                     <div id="dndArea" class="placeholder">
     
    
- 
    
     
    
    
                         <div id="filePicker-2"></div>
     
    
- 
    
     
    
    
                         <p>或将图片拖到这里,单次最多可选 $maxnumber 张</p>
     
    
- 
    
     
    
    
                     </div>
     
    
- 
    
     
    
    
                 </div>
     
    
- 
    
     
    
    
                 <div class="statusBar" style="display:none;">
     
    
- 
    
     
    
    
                     <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
     
    
- 
    
     
    
    
                     <div class="info"></div>
     
    
- 
    
     
    
    
                     <div class="btns">
     
    
- 
    
     
    
    
                         <div id="filePicker2"></div>
     
    
- 
    
     
    
    
                         <div class="uploadBtn">开始上传</div>
     
    
- 
    
     
    
    
                     </div>
     
    
- 
    
     
    
    
                 </div>
     
    
- 
    
     
    
    
             </div>
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
             <script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.min.js"></script>
     
    
- 
    
     
    
    
             <script type="text/javascript" >
     
    
- 
    
     
    
    
     
              (function( $ ){
     
    
- 
    
     
    
    
                 // 当domReady的时候开始初始化
     
    
- 
    
     
    
    
     
                  $(function() {
     
    
- 
    
     
    
    
                     var wrap = $('.uploader-list-container'),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 图片容器
     
    
- 
    
     
    
    
     
                      queue = $( '<ul class="filelist"></ul>' )
     
    
- 
    
     
    
    
     
                          .appendTo( wrap.find( '.queueList' ) ),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 状态栏,包括进度和控制按钮
     
    
- 
    
     
    
    
     
                      statusBar = wrap.find( '.statusBar' ),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 文件总体选择信息。
     
    
- 
    
     
    
    
     
                      info = statusBar.find( '.info' ),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 上传按钮
     
    
- 
    
     
    
    
     
                      upload = wrap.find( '.uploadBtn' ),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 没选择文件之前的内容。
     
    
- 
    
     
    
    
     
                      placeHolder = wrap.find( '.placeholder' ),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      progress = statusBar.find( '.progress' ).hide(),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 添加的文件数量
     
    
- 
    
     
    
    
     
                      fileCount = 0,
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 添加的文件总大小
     
    
- 
    
     
    
    
     
                      fileSize = 0,
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 优化retina, 在retina下这个值是2
     
    
- 
    
     
    
    
     
                      ratio = window.devicePixelRatio || 1,
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 缩略图大小
     
    
- 
    
     
    
    
     
                      thumbnailWidth = 110 * ratio,
     
    
- 
    
     
    
    
     
                      thumbnailHeight = 110 * ratio,
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 可能有pedding, ready, uploading, confirm, done.
     
    
- 
    
     
    
    
     
                      state = 'pedding',
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 所有文件的进度信息,key为file id
     
    
- 
    
     
    
    
     
                      percentages = {},
     
    
- 
    
     
    
    
                     // 判断浏览器是否支持图片的base64
     
    
- 
    
     
    
    
     
                      isSupportBase64 = ( function() {
     
    
- 
    
     
    
    
                         var data = new Image();
     
    
- 
    
     
    
    
                         var support = true;
     
    
- 
    
     
    
    
     
                          data.onload = data.onerror = function() {
     
    
- 
    
     
    
    
                             if( this.width != 1 || this.height != 1 ) {
     
    
- 
    
     
    
    
     
                                  support = false;
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
     
                          data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
     
    
- 
    
     
    
    
                         return support;
     
    
- 
    
     
    
    
     
                      } )(),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 检测是否已经安装flash,检测flash的版本
     
    
- 
    
     
    
    
     
                      flashVersion = ( function() {
     
    
- 
    
     
    
    
                         var version;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         try {
     
    
- 
    
     
    
    
     
                              version = navigator.plugins[ 'Shockwave Flash' ];
     
    
- 
    
     
    
    
     
                              version = version.description;
     
    
- 
    
     
    
    
     
                          } catch ( ex ) {
     
    
- 
    
     
    
    
                             try {
     
    
- 
    
     
    
    
     
                                  version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
     
    
- 
    
     
    
    
     
                                          .GetVariable('version');
     
    
- 
    
     
    
    
     
                              } catch ( ex2 ) {
     
    
- 
    
     
    
    
     
                                  version = '0.0';
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
     
                          version = version.match( /\d+/g );
     
    
- 
    
     
    
    
                         return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
     
    
- 
    
     
    
    
     
                      } )(),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      supportTransition = (function(){
     
    
- 
    
     
    
    
                         var s = document.createElement('p').style,
     
    
- 
    
     
    
    
     
                              r = 'transition' in s ||
     
    
- 
    
     
    
    
                                     'WebkitTransition' in s ||
     
    
- 
    
     
    
    
                                     'MozTransition' in s ||
     
    
- 
    
     
    
    
                                     'msTransition' in s ||
     
    
- 
    
     
    
    
                                     'OTransition' in s;
     
    
- 
    
     
    
    
     
                          s = null;
     
    
- 
    
     
    
    
                         return r;
     
    
- 
    
     
    
    
     
                      })(),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // WebUploader实例
     
    
- 
    
     
    
    
     
                      uploader;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 实例化
     
    
- 
    
     
    
    
     
                      uploader = WebUploader.create({
     
    
- 
    
     
    
    
                         pick: {
     
    
- 
    
     
    
    
                             id: '#filePicker-2',
     
    
- 
    
     
    
    
                             label: '点击选择图片'
     
    
- 
    
     
    
    
     
                          },
     
    
- 
    
     
    
    
                         formData: {
     
    
- 
    
     
    
    
                             uid: 123
     
    
- 
    
     
    
    
     
                          },
     
    
- 
    
     
    
    
                         dnd: '#dndArea',
     
    
- 
    
     
    
    
                         paste: '#uploader',
     
    
- 
    
     
    
    
                         swf: '__ADMIN__/plugins/webuploader-0.1.5/Uploader.swf',
     
    
- 
    
     
    
    
                         chunked: false,
     
    
- 
    
     
    
    
                         chunkSize: 512 * 1024,
     
    
- 
    
     
    
    
                         server: '$url',
     
    
- 
    
     
    
    
                         // runtimeOrder: 'flash',
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         accept: {
     
    
- 
    
     
    
    
                             title: 'Images',
     
    
- 
    
     
    
    
                             extensions: '$allowext',
     
    
- 
    
     
    
    
                             mimeTypes: 'image/*'
     
    
- 
    
     
    
    
     
                          },
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
     
    
- 
    
     
    
    
                         disableGlobalDnd: true,
     
    
- 
    
     
    
    
                         fileNumLimit: $maxnumber,
     
    
- 
    
     
    
    
                         fileSizeLimit: 200 * 1024 * 1024,    // 200 M
     
    
- 
    
     
    
    
                         fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 拖拽时不接受 js, txt 文件。
     
    
- 
    
     
    
    
     
                      uploader.on( 'dndAccept', function( items ) {
     
    
- 
    
     
    
    
                         var denied = false,
     
    
- 
    
     
    
    
     
                              len = items.length,
     
    
- 
    
     
    
    
     
                              i = 0,
     
    
- 
    
     
    
    
                             // 修改js类型
     
    
- 
    
     
    
    
     
                              unAllowed = 'text/plain;application/javascript ';
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         for ( ; i < len; i++ ) {
     
    
- 
    
     
    
    
                             // 如果在列表里面
     
    
- 
    
     
    
    
                             if ( ~unAllowed.indexOf( items[ i ].type ) ) {
     
    
- 
    
     
    
    
     
                                  denied = true;
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         return !denied;
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      uploader.on('dialogOpen', function() {
     
    
- 
    
     
    
    
                         console.log('here');
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // uploader.on('filesQueued', function() {
     
    
- 
    
     
    
    
                     // uploader.sort(function( a, b ) {
     
    
- 
    
     
    
    
                     // if ( a.name < b.name )
     
    
- 
    
     
    
    
                     // return -1;
     
    
- 
    
     
    
    
                     // if ( a.name > b.name )
     
    
- 
    
     
    
    
                     // return 1;
     
    
- 
    
     
    
    
                     // return 0;
     
    
- 
    
     
    
    
                     // });
     
    
- 
    
     
    
    
                     // });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 添加“添加文件”的按钮,
     
    
- 
    
     
    
    
     
                      uploader.addButton({
     
    
- 
    
     
    
    
                         id: '#filePicker2',
     
    
- 
    
     
    
    
                         label: '继续添加'
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      uploader.on('ready', function() {
     
    
- 
    
     
    
    
                         window.uploader = uploader;
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 当有文件添加进来时执行,负责view的创建
     
    
- 
    
     
    
    
                     function addFile( file ) {
     
    
- 
    
     
    
    
                         var li = $( '<li id="' + file.id + '">' +
     
    
- 
    
     
    
    
                                 '<p class="title">' + file.name + '</p>' +
     
    
- 
    
     
    
    
                                 '<p class="imgWrap"></p>'+
     
    
- 
    
     
    
    
                                 '<p class="progress"><span></span></p>' +
     
    
- 
    
     
    
    
                                 '</li>' ),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                              btns = $('<div class="file-panel">' +
     
    
- 
    
     
    
    
                                 '<span class="cancel">删除</span>' +
     
    
- 
    
     
    
    
                                 '<span class="rotateRight">向右旋转</span>' +
     
    
- 
    
     
    
    
                                 '<span class="rotateLeft">向左旋转</span></div>').appendTo( li ),
     
    
- 
    
     
    
    
     
                              prgress = li.find('p.progress span'),
     
    
- 
    
     
    
    
     
                              wrap = li.find( 'p.imgWrap' ),
     
    
- 
    
     
    
    
     
                              info = $('<p class="error"></p>'),
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                              showError = function( code ) {
     
    
- 
    
     
    
    
                                 switch( code ) {
     
    
- 
    
     
    
    
                                     case 'exceed_size':
     
    
- 
    
     
    
    
     
                                          text = '文件大小超出';
     
    
- 
    
     
    
    
                                         break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                     case 'interrupt':
     
    
- 
    
     
    
    
     
                                          text = '上传暂停';
     
    
- 
    
     
    
    
                                         break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                     default:
     
    
- 
    
     
    
    
     
                                          text = '上传失败,请重试';
     
    
- 
    
     
    
    
                                         break;
     
    
- 
    
     
    
    
     
                                  }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                                  info.text( text ).appendTo( li );
     
    
- 
    
     
    
    
     
                              };
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         if ( file.getStatus() === 'invalid' ) {
     
    
- 
    
     
    
    
                             showError( file.statusText );
     
    
- 
    
     
    
    
     
                          } else {
     
    
- 
    
     
    
    
                             // @todo lazyload
     
    
- 
    
     
    
    
     
                              wrap.text( '预览中' );
     
    
- 
    
     
    
    
     
                              uploader.makeThumb( file, function( error, src ) {
     
    
- 
    
     
    
    
                                 var img;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                 if ( error ) {
     
    
- 
    
     
    
    
     
                                      wrap.text( '不能预览' );
     
    
- 
    
     
    
    
                                     return;
     
    
- 
    
     
    
    
     
                                  }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                 if( isSupportBase64 ) {
     
    
- 
    
     
    
    
     
                                      img = $('<img src="'+src+'">');
     
    
- 
    
     
    
    
     
                                      wrap.empty().append( img );
     
    
- 
    
     
    
    
     
                                  } else {
     
    
- 
    
     
    
    
     
                                      $.ajax('../server/preview.php', {
     
    
- 
    
     
    
    
                                         method: 'POST',
     
    
- 
    
     
    
    
                                         data: src,
     
    
- 
    
     
    
    
                                         dataType:'json'
     
    
- 
    
     
    
    
     
                                      }).done(function( response ) {
     
    
- 
    
     
    
    
                                         if (response.result) {
     
    
- 
    
     
    
    
     
                                              img = $('<img src="'+response.result+'">');
     
    
- 
    
     
    
    
     
                                              wrap.empty().append( img );
     
    
- 
    
     
    
    
     
                                          } else {
     
    
- 
    
     
    
    
     
                                              wrap.text("预览出错");
     
    
- 
    
     
    
    
     
                                          }
     
    
- 
    
     
    
    
     
                                      });
     
    
- 
    
     
    
    
     
                                  }
     
    
- 
    
     
    
    
     
                              }, thumbnailWidth, thumbnailHeight );
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                              percentages[ file.id ] = [ file.size, 0 ];
     
    
- 
    
     
    
    
     
                              file.rotation = 0;
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          file.on('statuschange', function( cur, prev ) {
     
    
- 
    
     
    
    
                             if ( prev === 'progress' ) {
     
    
- 
    
     
    
    
     
                                  prgress.hide().width(0);
     
    
- 
    
     
    
    
     
                              } else if ( prev === 'queued' ) {
     
    
- 
    
     
    
    
                                 //li.off( 'mouseenter mouseleave' ); //解除事件监听
     
    
- 
    
     
    
    
                                 //btns.remove();
     
    
- 
    
     
    
    
     
                                  li.find( 'span.rotateLeft' ).remove(); //移除左旋转按钮
     
    
- 
    
     
    
    
     
                                  li.find( 'span.rotateRight' ).remove(); //移除右旋转按钮
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             // 成功
     
    
- 
    
     
    
    
                             if ( cur === 'error' || cur === 'invalid' ) {
     
    
- 
    
     
    
    
                                 console.log( file.statusText );
     
    
- 
    
     
    
    
                                 showError( file.statusText );
     
    
- 
    
     
    
    
     
                                  percentages[ file.id ][ 1 ] = 1;
     
    
- 
    
     
    
    
     
                              } else if ( cur === 'interrupt' ) {
     
    
- 
    
     
    
    
                                 showError( 'interrupt' );
     
    
- 
    
     
    
    
     
                              } else if ( cur === 'queued' ) {
     
    
- 
    
     
    
    
     
                                  percentages[ file.id ][ 1 ] = 0;
     
    
- 
    
     
    
    
     
                              } else if ( cur === 'progress' ) {
     
    
- 
    
     
    
    
     
                                  info.remove();
     
    
- 
    
     
    
    
     
                                  prgress.css('display', 'block');
     
    
- 
    
     
    
    
     
                              } else if ( cur === 'complete' ) {
     
    
- 
    
     
    
    
     
                                  li.append( '<span class="success"></span>' );
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                              li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
     
    
- 
    
     
    
    
     
                          });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          li.on( 'mouseenter', function() {
     
    
- 
    
     
    
    
     
                              btns.stop().animate({height: 30});
     
    
- 
    
     
    
    
     
                          });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          li.on( 'mouseleave', function() {
     
    
- 
    
     
    
    
     
                              btns.stop().animate({height: 0});
     
    
- 
    
     
    
    
     
                          });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          btns.on( 'click', 'span', function() {
     
    
- 
    
     
    
    
                             var index = $(this).index(),
     
    
- 
    
     
    
    
     
                                  deg;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             switch ( index ) {
     
    
- 
    
     
    
    
                                 case 0:
     
    
- 
    
     
    
    
     
                                      uploader.removeFile( file );
     
    
- 
    
     
    
    
                                     return;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                 case 1:
     
    
- 
    
     
    
    
     
                                      file.rotation += 90;
     
    
- 
    
     
    
    
                                     break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                 case 2:
     
    
- 
    
     
    
    
     
                                      file.rotation -= 90;
     
    
- 
    
     
    
    
                                     break;
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             if ( supportTransition ) {
     
    
- 
    
     
    
    
     
                                  deg = 'rotate(' + file.rotation + 'deg)';
     
    
- 
    
     
    
    
     
                                  wrap.css({
     
    
- 
    
     
    
    
                                     '-webkit-transform': deg,
     
    
- 
    
     
    
    
                                     '-mos-transform': deg,
     
    
- 
    
     
    
    
                                     '-o-transform': deg,
     
    
- 
    
     
    
    
                                     'transform': deg
     
    
- 
    
     
    
    
     
                                  });
     
    
- 
    
     
    
    
     
                              } else {
     
    
- 
    
     
    
    
     
                                  wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
     
    
- 
    
     
    
    
                                 // use jquery animate to rotation
     
    
- 
    
     
    
    
                                 // $({
     
    
- 
    
     
    
    
                                 // rotation: rotation
     
    
- 
    
     
    
    
                                 // }).animate({
     
    
- 
    
     
    
    
                                 // rotation: file.rotation
     
    
- 
    
     
    
    
                                 // }, {
     
    
- 
    
     
    
    
                                 // easing: 'linear',
     
    
- 
    
     
    
    
                                 // step: function( now ) {
     
    
- 
    
     
    
    
                                 // now = now * Math.PI / 180;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                 // var cos = Math.cos( now ),
     
    
- 
    
     
    
    
                                 // sin = Math.sin( now );
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                                 // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
     
    
- 
    
     
    
    
                                 // }
     
    
- 
    
     
    
    
                                 // });
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          li.appendTo( queue );
     
    
- 
    
     
    
    
     
                      }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     // 负责view的销毁
     
    
- 
    
     
    
    
                     function removeFile( file ) {
     
    
- 
    
     
    
    
                         var li = $('#'+file.id);
     
    
- 
    
     
    
    
                         var img_src = li.attr('studyfox_img');
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         delete percentages[ file.id ];
     
    
- 
    
     
    
    
                         updateTotalProgress();
     
    
- 
    
     
    
    
     
                          li.off().find('.file-panel').off().end().remove();
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         //后台删除图片
     
    
- 
    
     
    
    
     
                          $.ajax({
     
    
- 
    
     
    
    
                             url: '$delete_url',
     
    
- 
    
     
    
    
                             type: 'POST',
     
    
- 
    
     
    
    
                             data: {'img': img_src},
     
    
- 
    
     
    
    
                             success: function(result, textStatus){
     
    
- 
    
     
    
    
                                 //图片删除成功后移除文本框图片信息,三种情况 ,号位置在前 后 或没有,号
     
    
- 
    
     
    
    
                                 var images_value = $('#info_$field').val();//隐藏文本框的值
     
    
- 
    
     
    
    
     
                                  images_value = images_value.replace(img_src+',', ''); //替换,号在右边
     
    
- 
    
     
    
    
     
                                  images_value = images_value.replace(','+img_src, ''); //替换,号在左边
     
    
- 
    
     
    
    
     
                                  images_value = images_value.replace(img_src, ''); //直接替换
     
    
- 
    
     
    
    
                                 //重新赋值
     
    
- 
    
     
    
    
     
                                  $('#info_$field').val(images_value);
     
    
- 
    
     
    
    
     
                              },
     
    
- 
    
     
    
    
                             error: function(XMLHttpRequest, textStatus){
     
    
- 
    
     
    
    
     
                                  layer.alert('删除失败!', {icon:2});
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
     
                          });
     
    
- 
    
     
    
    
     
                      }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     //上传成功返回文件名
     
    
- 
    
     
    
    
     
                      uploader.on('uploadSuccess', function(file,response){
     
    
- 
    
     
    
    
                         var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
     
    
- 
    
     
    
    
     
                          $('#info_$field').val( images_value + response);
     
    
- 
    
     
    
    
                         //在当前图片LI里添加图片地址
     
    
- 
    
     
    
    
     
                          $('#'+file.id).attr('studyfox_img',response);
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     function updateTotalProgress() {
     
    
- 
    
     
    
    
                         var loaded = 0,
     
    
- 
    
     
    
    
     
                              total = 0,
     
    
- 
    
     
    
    
     
                              spans = progress.children(),
     
    
- 
    
     
    
    
     
                              percent;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          $.each( percentages, function( k, v ) {
     
    
- 
    
     
    
    
     
                              total += v[ 0 ];
     
    
- 
    
     
    
    
     
                              loaded += v[ 0 ] * v[ 1 ];
     
    
- 
    
     
    
    
     
                          } );
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          percent = total ? loaded / total : 0;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
     
    
- 
    
     
    
    
     
                          spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
     
    
- 
    
     
    
    
                         updateStatus();
     
    
- 
    
     
    
    
     
                      }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     function updateStatus() {
     
    
- 
    
     
    
    
                         var text = '', stats;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         if ( state === 'ready' ) {
     
    
- 
    
     
    
    
     
                              text = '选中' + fileCount + '张图片,共' +
     
    
- 
    
     
    
    
                                     WebUploader.formatSize( fileSize ) + '。';
     
    
- 
    
     
    
    
     
                          } else if ( state === 'confirm' ) {
     
    
- 
    
     
    
    
     
                              stats = uploader.getStats();
     
    
- 
    
     
    
    
                             if ( stats.uploadFailNum ) {
     
    
- 
    
     
    
    
     
                                  text = '已成功上传' + stats.successNum+ '张图片至服务器,'+
     
    
- 
    
     
    
    
     
                                      stats.uploadFailNum + '张图片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          } else {
     
    
- 
    
     
    
    
     
                              stats = uploader.getStats();
     
    
- 
    
     
    
    
     
                              text = '共' + fileCount + '张(' +
     
    
- 
    
     
    
    
                                     WebUploader.formatSize( fileSize )  +
     
    
- 
    
     
    
    
                                     '),已上传' + stats.successNum + '张';
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             if ( stats.uploadFailNum ) {
     
    
- 
    
     
    
    
     
                                  text += ',失败' + stats.uploadFailNum + '张';
     
    
- 
    
     
    
    
     
                              }
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          info.html( text );
     
    
- 
    
     
    
    
     
                      }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                     function setState( val ) {
     
    
- 
    
     
    
    
                         var file, stats;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         if ( val === state ) {
     
    
- 
    
     
    
    
                             return;
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          upload.removeClass( 'state-' + state );
     
    
- 
    
     
    
    
     
                          upload.addClass( 'state-' + val );
     
    
- 
    
     
    
    
     
                          state = val;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         switch ( state ) {
     
    
- 
    
     
    
    
                             case 'pedding':
     
    
- 
    
     
    
    
     
                                  placeHolder.removeClass( 'element-invisible' );
     
    
- 
    
     
    
    
     
                                  queue.hide();
     
    
- 
    
     
    
    
     
                                  statusBar.addClass( 'element-invisible' );
     
    
- 
    
     
    
    
     
                                  uploader.refresh();
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             case 'ready':
     
    
- 
    
     
    
    
     
                                  placeHolder.addClass( 'element-invisible' );
     
    
- 
    
     
    
    
     
                                  $( '#filePicker2' ).removeClass( 'element-invisible');
     
    
- 
    
     
    
    
     
                                  queue.show();
     
    
- 
    
     
    
    
     
                                  statusBar.removeClass('element-invisible');
     
    
- 
    
     
    
    
     
                                  uploader.refresh();
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             case 'uploading':
     
    
- 
    
     
    
    
     
                                  $( '#filePicker2' ).addClass( 'element-invisible' );
     
    
- 
    
     
    
    
     
                                  progress.show();
     
    
- 
    
     
    
    
     
                                  upload.text( '暂停上传' );
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             case 'paused':
     
    
- 
    
     
    
    
     
                                  progress.show();
     
    
- 
    
     
    
    
     
                                  upload.text( '继续上传' );
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             case 'confirm':
     
    
- 
    
     
    
    
     
                                  progress.hide();
     
    
- 
    
     
    
    
     
                                  $( '#filePicker2' ).removeClass( 'element-invisible' );
     
    
- 
    
     
    
    
     
                                  upload.text( '开始上传' );
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                                  stats = uploader.getStats();
     
    
- 
    
     
    
    
                                 if ( stats.successNum && !stats.uploadFailNum ) {
     
    
- 
    
     
    
    
                                     setState( 'finish' );
     
    
- 
    
     
    
    
                                     return;
     
    
- 
    
     
    
    
     
                                  }
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
                             case 'finish':
     
    
- 
    
     
    
    
     
                                  stats = uploader.getStats();
     
    
- 
    
     
    
    
                                 if ( stats.successNum ) {
     
    
- 
    
     
    
    
     
                                      layer.alert( '上传成功' );
     
    
- 
    
     
    
    
     
                                  } else {
     
    
- 
    
     
    
    
                                     // 没有成功的图片,重设
     
    
- 
    
     
    
    
     
                                      state = 'done';
     
    
- 
    
     
    
    
     
                                      location.reload();
     
    
- 
    
     
    
    
     
                                  }
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         updateStatus();
     
    
- 
    
     
    
    
     
                      }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      uploader.onUploadProgress = function( file, percentage ) {
     
    
- 
    
     
    
    
                         var li = $('#'+file.id),
     
    
- 
    
     
    
    
     
                              percent = li.find('.progress span');
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          percent.css( 'width', percentage * 100 + '%' );
     
    
- 
    
     
    
    
     
                          percentages[ file.id ][ 1 ] = percentage;
     
    
- 
    
     
    
    
                         updateTotalProgress();
     
    
- 
    
     
    
    
     
                      };
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      uploader.onFileQueued = function( file ) {
     
    
- 
    
     
    
    
     
                          fileCount++;
     
    
- 
    
     
    
    
     
                          fileSize += file.size;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         if ( fileCount === 1 ) {
     
    
- 
    
     
    
    
     
                              placeHolder.addClass( 'element-invisible' );
     
    
- 
    
     
    
    
     
                              statusBar.show();
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         addFile( file );
     
    
- 
    
     
    
    
                         setState( 'ready' );
     
    
- 
    
     
    
    
                         updateTotalProgress();
     
    
- 
    
     
    
    
     
                      };
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      uploader.onFileDequeued = function( file ) {
     
    
- 
    
     
    
    
     
                          fileCount--;
     
    
- 
    
     
    
    
     
                          fileSize -= file.size;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         if ( !fileCount ) {
     
    
- 
    
     
    
    
                             setState( 'pedding' );
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         removeFile( file );
     
    
- 
    
     
    
    
                         updateTotalProgress();
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      };
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      uploader.on( 'all', function( type ) {
     
    
- 
    
     
    
    
                         var stats;
     
    
- 
    
     
    
    
                         switch( type ) {
     
    
- 
    
     
    
    
                             case 'uploadFinished':
     
    
- 
    
     
    
    
                                 setState( 'confirm' );
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             case 'startUpload':
     
    
- 
    
     
    
    
                                 setState( 'uploading' );
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                             case 'stopUpload':
     
    
- 
    
     
    
    
                                 setState( 'paused' );
     
    
- 
    
     
    
    
                                 break;
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      uploader.onError = function( code ) {
     
    
- 
    
     
    
    
                         if(code == "Q_EXCEED_NUM_LIMIT") {
     
    
- 
    
     
    
    
     
                             layer.alert("只能上传 $maxnumber 张图片");
     
    
- 
    
     
    
    
     
                          } else if(code == "F_DUPLICATE") {
     
    
- 
    
     
    
    
     
                             layer.alert("重复上传");
     
    
- 
    
     
    
    
     
                          } else {
     
    
- 
    
     
    
    
     
                              layer.alert("错误代码:" + code);
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
     
                      };
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      upload.on('click', function() {
     
    
- 
    
     
    
    
                         if ( $(this).hasClass( 'disabled' ) ) {
     
    
- 
    
     
    
    
                             return false;
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
                         if ( state === 'ready' ) {
     
    
- 
    
     
    
    
     
                              uploader.upload();
     
    
- 
    
     
    
    
     
                          } else if ( state === 'paused' ) {
     
    
- 
    
     
    
    
     
                              uploader.upload();
     
    
- 
    
     
    
    
     
                          } else if ( state === 'uploading' ) {
     
    
- 
    
     
    
    
     
                              uploader.stop();
     
    
- 
    
     
    
    
     
                          }
     
    
- 
    
     
    
    
     
                      });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      info.on( 'click', '.retry', function() {
     
    
- 
    
     
    
    
     
                          uploader.retry();
     
    
- 
    
     
    
    
     
                      } );
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      info.on( 'click', '.ignore', function() {
     
    
- 
    
     
    
    
                         alert( 'todo' );
     
    
- 
    
     
    
    
     
                      } );
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
                      upload.addClass( 'state-' + state );
     
    
- 
    
     
    
    
                     updateTotalProgress();
     
    
- 
    
     
    
    
     
                  });
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
              })( jQuery );
     
    
- 
    
     
    
    
             </script>
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
      
     
    
- 
    
     
    
    
     
      EOF;
     
    
- 
    
     
    
    
     
          return $str;
     
    
- 
    
     
    
    
     
      }
     
    
 
 文章来源: markwcm.blog.csdn.net,作者:黄啊码,版权归原作者所有,如需转载,请联系作者。
原文链接:markwcm.blog.csdn.net/article/details/106382112
        【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
            cloudbbs@huaweicloud.com
        
        
        
        
        
        
        - 点赞
- 收藏
- 关注作者
 
            
 
           
评论(0)