Kompresja plików przed przesłaniem po stronie klienta

Question

Zasadniczo będę pracował z dużymi plikami XML (około 20 - 50 MB). Pliki te należy przesłać na serwer.

Wiem, że nie można dotknąć plików za pomocą javascript ani zaimplementować kompresji HTTP po stronie klienta.

Moje pytanie brzmi: czy istnieje jakieś rozwiązanie (skrypt flash/action), które kompresuje plik i ma interfejs API javascript?

Scenariusz jest taki:

1. Próbuje załadować 50 MB plik XML
2. Przed przesłać Skorzystaj z JavaScript i wysłać go do sprężarki.
3. Prześlij skompresowany plik zamiast oryginalnego.

Answer 1

wbudowana wdrożenie Flasha z ByteArray ma metodę (ByteArray::deflate aby opróżnić zawartość (o ByteArray) Algorytm deflate jest DEFLATE Compressed Data Format Specification version 1.3

Istnieje S również ByteArray::compress metoda, która ściska za pomocą algorytmu

zlib

Poczekaj trochę, będę pisać ci przykładowy kod aby skorzystać z tej klasy i narazić go na JavaScript.

EDIT

został przesłany plik w http://www.filefactory.com/file/cf8a39c/n/demo5.zip

EDIT 2 Dla tych, którzy nie mogli pobrać pliki:

mojego kodu ActionScript w demo5.fla (skompilowany do demo5.swf)

import flash.external.ExternalInterface; 
import flash.net.FileReference; 
import flash.events.Event; 
import flash.utils.ByteArray; 

if(ExternalInterface.available) { 
    //flash.system.Security.allowDomain("localhost"); 
    ExternalInterface.addCallback("deflate", doDeflate); 
    ExternalInterface.addCallback("compress", doCompress); 
} 

var method:String="deflate"; 
var b:ByteArray; 
function doCompress(_data:String):void { 
    method="compress"; 
    exec(_data); 
} 

function doDeflate(_data:String):void { 
    method="deflate"; 
    exec(_data); 
} 

function exec(_data:String):void { 
    b=new ByteArray(); 
    b.writeUTFBytes(_data); 
    b.position=0; 
    if(method=="compress") { 
     b.compress(); 
    } else if(method=="deflate") { 
     b.deflate(); 
    } 
    executed(); 
} 

function executed():void { 
    if(ExternalInterface.available) { 
     b.position=0; 
     var str:String=b.readUTFBytes(b.bytesAvailable); 
     ExternalInterface.call("onExec", str); 
    } 
} 

Mój kod HTML osadzić SWF:

<button onclick="doDeflate()">Deflate</button> 
<button onclick="doCompress()">Compress</button> 
<div id="flashContent"> 
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1" height="1" id="demo5" align="middle"> 
     <param name="movie" value="demo5.swf" /> 
     <param name="quality" value="high" /> 
     <param name="bgcolor" value="#ffffff" /> 
     <param name="play" value="true" /> 
     <param name="loop" value="true" /> 
     <param name="wmode" value="window" /> 
     <param name="scale" value="showall" /> 
     <param name="menu" value="true" /> 
     <param name="devicefont" value="false" /> 
     <param name="salign" value="" /> 
     <param name="allowScriptAccess" value="always" /> 

     <embed src="demo5.swf" quality="high" bgcolor="#869ca7" 
      width="1" height="1" name="demo5" align="middle" 
      play="true" loop="false" quality="high" allowScriptAccess="always" 
      type="application/x-shockwave-flash" 
      pluginspage="http://www.macromedia.com/go/getflashplayer"> 
     </embed> 
    </object> 
</div> 

i wreszcie kod javascript:

function doDeflate() { 
    var data="fdg fhnkl,hgltrebdkjlgyu ia43uwriu67ri8m nirugklhvjsd fgvu"; 
    //DATA CONTAINS DATA TO BE DEFLATED 
    thisMovie("demo5").deflate(data); 
} 

function doCompress() { 
    var data="fdg fhnkl,hgltrebdkjlgyu ia43uwriu67ri8m nirugklhvjsd fgvu"; 
    //DATA CONTAINS DATA TO BE DEFLATED 
    thisMovie("demo5").compress(data); 
} 

function onExec(data) { 
    //DATA CONTAINS THE DEFLATED DATA 
    alert(data); 
} 

function thisMovie(movieName) { 
    if (navigator.appName.indexOf("Microsoft") != -1) { 
     return window[movieName]; 
    } else { 
     return document[movieName]; 
    } 
} 

Answer 2

jakiś javascript biblioteka Huffman kompresji swobodnie dostępne np https://github.com/wilkerlucio/huffman_js ale myślę, że naszym zadaniem jest niemożliwe, ponieważ z JavaScript i HTML nie jest możliwe, aby załadować ogromne danych do pamięci przeglądarki lub klienta.

Answer 3

Jeśli z jakiegoś powodu nie można znaleźć rozwiązania do pracy w JavaScript dla wszystkich głównych przeglądarek, znam bibliotekę kompresji AS3 tutaj: http://code.google.com/p/ascompress/.

Co więcej, mniej interesująca opcja, jeśli Twoi docelowi użytkownicy są nieco systernami technicznymi, dlaczego nie mieliby załadować pliku .zip pliku xml? Następnie po stronie serwera można rozpakować i przetworzyć w razie potrzeby.

Tak czy inaczej po stronie serwera będziesz chciał rozpakować/rozpakować, co powinno być łatwe do znalezienia rozwiązań w Google, jeśli jeszcze tego nie masz. .

Answer 4

z Silverlight, można zip plików po stronie klienta, a to podejście działa we wszystkich głównych przeglądarkach. Co więcej, możesz korzystać z widgetu Silverlight za pomocą JavaScript. Ponadto, jeśli użytkownik musi przesłać kilka plików, widżet Silverlight może wyświetlać jedno okno dialogowe pojedynczego w celu wybrania wszystkich plików. Jedyną wadą jest to, że twoi klienci muszą zainstalować wtyczkę Silverlight.

Answer 5

Rozważ omówienie tego innego stackoverflow post. Czytanie obu odpowiedzi daje dobry obraz rzeczywistości kompresji.

Rozważam wdrożenie rozwiązania Silverlight of Flex, które kompresuje stronę klienta i jeśli użytkownik nie chce go instalować, kompresuje i dekompresuje stronę serwera plików. Aktualizuje ten wpis po znalezieniu rozwiązania.

Zainstalowanie kontrolki zostanie sprzedane użytkownikowi jako oszczędność czasu, co zwykle jest prawdą. Dla serwera będzie to wygaszacz przetwarzania przepustowości i kompresji.

Answer 6

Możesz skorzystać z JSZip. Dla wejścia, obsługuje String/ArrayBuffer/Uint8Array/Buffer, ale nieblob s, co jest, co można uzyskać z <input type="file"/> z javascript:

Obiekt File jest specyficzny rodzaj Blob, i mogą być używane w dowolnym kontekście, że blob może

(link)

Więc trzeba przekształcić blob/plik do np najpierw ArrayBuffer, np. przy użyciu FileReader.readAsArrayBuffer(). Zauważ, że ta funkcja działa asynchronicznie, wymagając użycia wywołania zwrotnego. Dostępna jest również wersja FileReaderSync "Ten interfejs jest dostępny tylko dla pracowników, ponieważ umożliwia synchroniczne operacje we/wy, które mogą potencjalnie blokować", więc nie widzę żadnego pożytku z jego używania.

(EDIT. Nie jestem pewien, ale wierzę, że można pominąć blob-> konwersji ArrayBuffer teraz i po prostu zip obiekt File.)

Cała ta jest szczególnie przydatna podejście jeśli dyrektywa PHP max_file_uploads było zestaw do niewielkiej liczby przez gospodarza Przestrzeń, na razie jedyną rzeczą, którą musisz się martwić o to upload_max_filesize

dla porównania, wielkość próbki kodu następujący fragment (używając JQuery) za wprowadzenie kilku plików z jednego wejścia multiple w pliku zip przed przesłaniem:

// onclick: 
var fileInput = $(':file'); 
var files = []; 
$.each(fileInput[0].files, function(i, file) { 
    files.push(file); 
}); 

var zip = new JSZip(); 
function addFileToZip(n) { 
    if(n >= files.length) { 
     zippingComplete(zip.generate({type:"blob", compression:"deflate"})); 
     return; 
    } 
    var file = files[n];      
    var arrayBuffer; 
    var fileReader = new FileReader(); 
    fileReader.onload = function() { 
     arrayBuffer = this.result; 
     zip.file(file.name, arrayBuffer); 
     addFileToZip(n + 1); 
    }; 
    fileReader.readAsArrayBuffer(file); 
} 
addFileToZip(0); 

function zippingComplete(zip) { 
    formData = new FormData(); 
    formData.append('fileZip', zip); 
    formData.append("param1", "blah"); 
    $.ajax({ 
     data: formData, 
     //... etc 

Po stronie serwera uzyskasz dostęp do $_FILES["fileZip"].