2015-08-08 3 views
1

Я хочу сделать простую загрузку с помощью plupload, которая принимает изображение и преобразовать его в кратном размере, как thumb, medium, full и установить их различные папки местоположения,загрузка изображений различных размеров в различных папках с помощью Pluploader

Я пробовал код для того, что хорошо работает для загрузки файлов в другое место, но не может изменить размер изображения для этой конкретной папки.

Он хранит все три файла одинакового размера.

Вот что я попытался это:

Мой код:

<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="plupload.full.min.js"></script> 
    </head> 
    <body> 
     <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div> 
     <br /> 

     <div id="container"> 
      <a id="pickfiles" href="javascript:;">[Select files]</a> 
      <a id="uploadfiles" href="javascript:;">[Upload files]</a> 
     </div> 

     <br /> 
     <pre id="console"></pre> 


     <script type="text/javascript"> 
      var folder = ''; 
      var i = 0; 
      folder = 'full'; 
      // Custom example logic 
      var uploader = new plupload.Uploader({ 
       runtimes: 'html5,flash,silverlight,html4', 
       browse_button: 'pickfiles', // you can pass in id... 
       container: document.getElementById('container'), // ... or DOM Element itself 

       url: "http://localhost/plupload_new/public_html/upload.php?diretorio=" + folder, 
       filters: { 
        max_file_size: '10mb', 
        mime_types: [ 
         {title: "Image files", extensions: "jpg,gif,png"}, 
         {title: "Zip files", extensions: "zip"} 
        ] 
       }, 
       // Flash settings 
       flash_swf_url: '/plupload/js/Moxie.swf', 
       // Silverlight settings 
       silverlight_xap_url: '/plupload/js/Moxie.xap', 
       init: { 
        PostInit: function() { 
         document.getElementById('filelist').innerHTML = ''; 
         document.getElementById('uploadfiles').onclick = function() { 
          uploader.start(); 
          return false; 
         }; 
        }, 
        FilesAdded: function (up, files) { 
         plupload.each(files, function (file) { 
          document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>'; 
         }); 
        }, 
        UploadProgress: function (up, file) { 
         document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; 
        }, 
        Error: function (up, err) { 
         document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message; 
        } 
       } 
      }); 
      var i = 1; 
      uploader.bind('BeforeUpload', function (up, file) { 
       if ('thumb' in file) { 
        if (i == 1) { 
         //thumb 
         up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=thumb', 
         up.settings.resize = {width: 50, height: 50, quality: 50}; 
        } else { 
         // medium size 
         up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=medium', 
         up.settings.resize = {width: 400, height: 600, quality: 70}; 
        } 
       } else { 
        up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=full', 
        up.settings.resize = {quality: 100}; 

       } 
       uploader.bind('FileUploaded', function (up, file) { 
        if (!('thumb' in file)) { 
         file.thumb = true; 
         file.loaded = 0; 
         file.percent = 0; 
         file.status = plupload.QUEUED; 
         up.trigger("QueueChanged"); 
         up.refresh(); 
        } else { 
         i++; 
         file.medium = true; 
         file.loaded = 0; 
         file.percent = 0; 
         file.status = plupload.QUEUED; 
         up.trigger("QueueChanged"); 
         up.refresh(); 
        } 
       }); 
      }); 
      uploader.init(); 
     </script> 
    </body> 
</html> 

Любая помощь будет оценена

Спасибо заранее.

+0

HTTP: //stackoverflow.com/a/16218442/1318946 –

ответ

1

Я нашел решение, которое является очень небольшим изменением моего кода, публикуемым в вопросе, единственным, что мне нужно изменить это я добавил атрибут enabled:true в моем параметре изменения размера, как,

up.settings.resize = {width: 80, height: 80, enabled: true}; 
Смежные вопросы