2011-08-15 5 views
3

만들려면 이미지 목록을 plupload filelist에 넣으십시오. 그러나 가치를 바꾸지 마십시오. 은 내가 $ ('# 값')파일 목록 요소를 Plupload

   uploader.bind('FileUploaded', function(up, file, response) { 
        handleStatus(file); 
        var obj = jQuery.parseJSON(response.response); 
        $('#value').text(obj.file); 

       }); 

       uploader.bind("UploadProgress", function(up, file) { 
        // Set file specific progress 
        $('#' + file.id + ' div.plupload_file_status', target).html(file.percent + '%'); 

        handleStatus(file); 
        updateTotalProgress(); 

        if (settings.multiple_queues && uploader.total.uploaded + uploader.total.failed == uploader.files.length) { 
         $(".plupload_buttons,.plupload_upload_status", target).css("display", "inline"); 
         $(".plupload_start", target).addClass("plupload_disabled"); 
         $('span.plupload_total_status,span.plupload_total_file_size', target).hide(); 
        } 


       }); 

       // Call setup function 
       if (settings.setup) { 
        settings.setup(uploader); 
       } 
      }); 

      return this; 
     } else { 
      // Get uploader instance for specified element 
      return uploaders[$(this[0]).attr('id')]; 
     } 
    }; 

})(jQuery); 

내가이 어떻게 할 수 보내기 값을 만들고 싶어 // 전송 값이

(function($) { 
    var uploaders = {}; 

    function _(str) { 
     return plupload.translate(str) || str; 
    } 

    function renderUI(id, target) { 
     // Remove all existing non plupload items 
     target.contents().each(function(i, node) { 
      node = $(node); 

      if (!node.is('.plupload')) { 
       node.remove(); 
      } 
     }); 

     target.prepend(
      '<div id="sonuc"></div>' + 
      '<div class="plupload_wrapper plupload_scroll">' + 
       '<div id="' + id + '_container" class="plupload_container">' + 
        '<div class="plupload">' + 
         //'<div class="plupload_header">' + 
          //'<div class="plupload_header_content">' + 
          // '<div class="plupload_header_title">' + _('Select files') + '</div>' + 
          // '<div class="plupload_header_text">' + _('Add files to the upload queue and click the start button.') + '</div>' + 
          //'</div>' + 
         //'</div>' + 

         '<div class="plupload_content">' + 
          '<div class="plupload_filelist_header">' + 
           '<div class="plupload_file_name">' + _('Dosya Adı') + '</div>' + 
           '<div class="plupload_file_action">&nbsp;</div>' + 
           '<div class="plupload_file_status"><span>' + _('Durum') + '</span></div>' + 
           '<div class="plupload_file_size">' + _('Boyut') + '</div>' + 
           '<div class="plupload_clearer">&nbsp;</div>' + 
          '</div>' + 

          '<ul id="' + id + '_filelist" class="plupload_filelist"></ul>' + 

          '<div class="plupload_filelist_footer">' + 
           '<div class="plupload_file_name">' + 
            '<div class="plupload_buttons">' + 
             '<a href="#" class="plupload_button plupload_add">' + _('Listeye Ekle') + '</a>' + 
             '<a href="#" class="plupload_button plupload_start">' + _('Yüklemeyi Başlat') + '</a>' + 
            '</div>' + 
            '<span class="plupload_upload_status"></span>' + 
           '</div>' + 
           '<div class="plupload_file_action"></div>' + 
           '<div class="plupload_file_status"><span class="plupload_total_status">0%</span></div>' + 
           '<div class="plupload_file_size"><span class="plupload_total_file_size">0 b</span></div>' + 
           '<div class="plupload_progress">' + 
            '<div class="plupload_progress_container">' + 
             '<div class="plupload_progress_bar"></div>' + 
            '</div>' + 
           '</div>' + 
           '<div class="plupload_clearer">&nbsp;</div>' + 
          '</div>' + 
         '</div>' + 
        '</div>' + 
       '</div>' + 
       '<input type="hidden" id="' + id + '_count" name="' + id + '_count" value="0" />' + 
      '</div>' 


     ); 
    } 

    $.fn.pluploadQueue = function(settings) { 

     if (settings) { 
      this.each(function() { 
       var uploader, target, id; 

       target = $(this); 
       id = target.attr('id'); 

       if (!id) { 
        id = plupload.guid(); 
        target.attr('id', id); 
       } 

       uploader = new plupload.Uploader($.extend({ 
        dragdrop : true, 
        container : id 
       }, settings)); 

       uploaders[id] = uploader; 

       function handleStatus(file) { 
        var actionClass; 

        if (file.status == plupload.DONE) { 
         actionClass = 'plupload_done'; 
        } 

        if (file.status == plupload.FAILED) { 
         actionClass = 'plupload_failed'; 
        } 

        if (file.status == plupload.QUEUED) { 
         actionClass = 'plupload_delete'; 
        } 

        if (file.status == plupload.UPLOADING) { 
         actionClass = 'plupload_uploading'; 
        } 

        var icon = $('#' + file.id).attr('class', actionClass).find('a').css('display', 'block'); 
        if (file.hint) { 
         icon.attr('title', file.hint); 
        } 
       } 
       function updateTotalProgress() { 
        $('span.plupload_total_status', target).html(uploader.total.percent + '%'); 
        $('div.plupload_progress_bar', target).css('width', uploader.total.percent + '%'); 
        $('span.plupload_upload_status', target).text(
         _('Yüklenen dosya %d/%d').replace(/%d\/%d/, uploader.total.uploaded+'/'+uploader.files.length) 
        ); 
       } 

       function updateList() { 
        var fileList = $('ul.plupload_filelist', target).html(''), inputCount = 0, inputHTML; 

        $.each(uploader.files, function(i, file) { 
         inputHTML = ''; 

         if (file.status == plupload.DONE) { 
          if (file.target_name) { 
           inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_tmpname" value="' + plupload.xmlEncode(file.target_name) + '" />'; 
          } 

          inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_name" value="' + plupload.xmlEncode(file.name) + '" />'; 
          inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_status" value="' + (file.status == plupload.DONE ? 'done' : 'failed') + '" />'; 

          inputCount++; 

          $('#' + id + '_count').val(inputCount); 
         } 

         fileList.append(
          '<li id="' + file.id + '">' + 
           '<div class="plupload_file_name"><span id="value"></span></div>' + 
           '<div class="plupload_file_action"><a href="#"></a></div>' + 
           '<div class="plupload_file_status">' + file.percent + '%</div>' + 
           '<div class="plupload_file_size">' + plupload.formatSize(file.size) + '</div>' + 
           '<div class="plupload_clearer">&nbsp;</div>' + 
           inputHTML + 
          '</li>' 
         ); 

         handleStatus(file); 

         $('#' + file.id + '.plupload_delete a').click(function(e) { 
          $('#' + file.id).remove(); 
          uploader.removeFile(file); 

          e.preventDefault(); 
         }); 
        }); 

        $('span.plupload_total_file_size', target).html(plupload.formatSize(uploader.total.size)); 

        if (uploader.total.queued === 0) { 
         $('span.plupload_add_text', target).text(_('Add files.')); 
        } else { 
         $('span.plupload_add_text', target).text(uploader.total.queued + ' files queued.'); 
        } 

        $('a.plupload_start', target).toggleClass('plupload_disabled', uploader.files.length == (uploader.total.uploaded + uploader.total.failed)); 

        // Scroll to end of file list 
        fileList[0].scrollTop = fileList[0].scrollHeight; 

        updateTotalProgress(); 

        // Re-add drag message if there is no files 
        if (!uploader.files.length && uploader.features.dragdrop && uploader.settings.dragdrop) { 
         $('#' + id + '_filelist').append('<li class="plupload_droptext">' + _("Drag files here.") + '</li>'); 
        } 
       } 

       uploader.bind("UploadFile", function(up, file) { 
        $('#' + file.id).addClass('plupload_current_file'); 

       }); 

       uploader.bind('Init', function(up, res) { 
        renderUI(id, target); 

        // Enable rename support 
        if (!settings.unique_names && settings.rename) { 
         $('#' + id + '_filelist div.plupload_file_name span', target).live('click', function(e) { 
          var targetSpan = $(e.target), file, parts, name, ext = ""; 

          // Get file name and split out name and extension 
          file = up.getFile(targetSpan.parents('li')[0].id); 
          name = file.name; 
          parts = /^(.+)(\.[^.]+)$/.exec(name); 
          if (parts) { 
           name = parts[1]; 
           ext = parts[2]; 
          } 

          // Display input element 
          targetSpan.hide().after('<input type="text" />'); 
          targetSpan.next().val(name).focus().blur(function() { 
           targetSpan.show().next().remove(); 
          }).keydown(function(e) { 
           var targetInput = $(this); 

           if (e.keyCode == 13) { 
            e.preventDefault(); 

            // Rename file and glue extension back on 
            file.name = targetInput.val() + ext; 
            targetSpan.text(file.name); 
            targetInput.blur(); 
           } 
          }); 
         }); 
        } 

        $('a.plupload_add', target).attr('id', id + '_browse'); 

        up.settings.browse_button = id + '_browse'; 

        // Enable drag/drop 
        if (up.features.dragdrop && up.settings.dragdrop) { 
         up.settings.drop_element = id + '_filelist'; 
         $('#' + id + '_filelist').append('<li class="plupload_droptext">' + _("Drag files here.") + '</li>'); 
        } 

        //$('#' + id + '_container').attr('title', 'Using runtime: ' + res.runtime); 

        $('a.plupload_start', target).click(function(e) { 
         if (!$(this).hasClass('plupload_disabled')) { 
          uploader.start(); 
         } 

         e.preventDefault(); 
        }); 

        $('a.plupload_stop', target).click(function(e) { 
         e.preventDefault(); 
         uploader.stop(); 
        }); 

        $('a.plupload_start', target).addClass('plupload_disabled'); 
       }); 

       uploader.init(); 

       uploader.bind("Error", function(up, err) { 
        var file = err.file, message; 

        if (file) { 
         message = err.message; 

         if (err.details) { 
          message += " (" + err.details + ")"; 
         } 

         if (err.code == plupload.FILE_SIZE_ERROR) { 
          alert(_("Error: File to large: ") + file.name); 
         } 

         if (err.code == plupload.FILE_EXTENSION_ERROR) { 
          alert(_("Error: Invalid file extension: ") + file.name); 
         } 

         file.hint = message; 
         $('#' + file.id).attr('class', 'plupload_failed').find('a').css('display', 'block').attr('title', message); 
        } 
       }); 

       uploader.bind('StateChanged', function() { 
        if (uploader.state === plupload.STARTED) { 
         $('li.plupload_delete a,div.plupload_buttons', target).hide(); 
         $('span.plupload_upload_status,div.plupload_progress,a.plupload_stop', target).css('display', 'block'); 
         $('span.plupload_upload_status', target).text('Uploaded ' + uploader.total.uploaded + '/' + uploader.files.length + ' files'); 

         if (settings.multiple_queues) { 
          $('span.plupload_total_status,span.plupload_total_file_size', target).show(); 
         } 
        } else { 
         updateList(); 
         $('a.plupload_stop,div.plupload_progress', target).hide(); 
         $('a.plupload_delete', target).css('display', 'block'); 
        } 
       }); 

       uploader.bind('QueueChanged', updateList); 

을 # VALUE을 만들고 싶어?

답변 해 주셔서 감사합니다.

답변

7

정확하게 이해하면 미리보기 파일 대기열 목록에 미리 정의 된 목록을 표시하고 싶지만 업로드하지 않으려합니다. 내 프로젝트 중 하나에서 이와 같이 somethig이 필요하며 아래에서 해결 방법을 찾으십시오.

$("#uploaddiv").plupload(
    // Do default configuration stuff 
    preinit: { 
     Init: function(up) { 
      // create a new file array for plupload queue 
      var files = new Array(); 

      // create a new file object 
      var f = new plupload.File("Test0.png", "read_image_name.png", 0); 
      f.status = plupload.DONE; 
      f.percent = 100; 
      files.push(f); 

      // append files to our array 
      up.files = files; 

      // create a new QueueProgress and configure 
      var queueprogress = new plupload.QueueProgress(); 
      queueprogress.size = 1; 
      queueprogress.uploaded = 1; 
      queueprogress.percent= 100; 

      // set uploader queue process and reload ui 
      up.total = queueprogress; 
      up.trigger("QueueChanged"); 
     } 
    } 
); 
+0

감사합니다. 특히 프로그램 적으로 새로운 plupload를 추가하는 예입니다. 파일 대기열에 파일을 추가하십시오. – GuruBob

+0

선생님, 신사예요! 고맙습니다. – George

+1

plupload 1.5.5를 사용하여이 코드가 작동하도록 두 가지 변경을해야했습니다. 1) 대기열에서 렌더링 할 시간을 허용하기 위해 지연 시간이 0 인'setTimeout'에'up.trigger ("QueueChanged")'를 래핑하십시오. IE와 Chome 둘 다에서 그리고 2) 원래의'up.files'와'up.total' 오브젝트를 새로운 오브젝트로 대체하는 대신 대기중인 파일을 등록 할 수 있도록 사용하십시오. 누군가가 문제를 해결하기를 바랍니다. – Theo

0

2.1.9 버전에서 'FileAdded'트리거가 발생하면 파일이 나타납니다.

+0

안녕하세요, 귀하의 코드를 이해하는 데 도움이되는대로 코드와 함께 약간의 설명을 추가하십시오. 코드 만 응답은 눈살을 찌푸리게됩니다. –

+0

그들은 코드를 제거해야한다는 것을 의미하지는 않았으며 몇 가지 논평을 추가했습니다! –