फ़ाइल संपीड़न क्लाइंट साइड

Question

मूल रूप से मैं बड़े XML फ़ाइलों के साथ काम करेंगे पर अपलोड करने से पहले। इन फ़ाइलों को एक सर्वर पर अपलोड करने की जरूरत है।

मैं जानता हूँ कि यह जावास्क्रिप्ट के साथ फ़ाइलों को छूने के लिए, और न ही ग्राहक पक्ष पर HTTP संपीड़न लागू करने के लिए संभव नहीं है।

मेरा प्रश्न है कि किसी भी समाधान मौजूद है अगर (फ्लैश/कार्रवाई स्क्रिप्ट) है कि एक फ़ाइल को संपीड़ित करता है और एक जावास्क्रिप्ट एपीआई है?

1. जावास्क्रिप्ट के साथ यह 50 MB एक्सएमएल फ़ाइल
2. अपलोड अपलोड करने से पहले एक हड़पने और कंप्रेसर को भेजने के लिए कोशिश कर रहा है:

   परिदृश्य यह है।

3. बजाय मूल एक के संकुचित फ़ाइल अपलोड करें।

Answer 1

bytearray के फ्लैश की इनबिल्ट कार्यान्वयन के लिए एक विधि (ByteArray::deflate bytearray की सामग्रियों() हवा निकालना को Deflate एल्गोरिथ्म DEFLATE Compressed Data Format Specification version 1.3 है

वहाँ है, यह भी एक तरीका है जिसके ByteArray::compresszlib एल्गोरिथ्म

का उपयोग कर संपीड़ित करता है थोड़ा पर

होल्ड, मैं तुम्हें इस वर्ग का उपयोग करें और जावास्क्रिप्ट को यह बेनकाब करने के लिए कुछ नमूना कोड लिखेंगे।

संपादित

मैं http://www.filefactory.com/file/cf8a39c/n/demo5.zip

संपादित 2 पर फ़ाइल को अपलोड किया जो लोग फ़ाइलों को डाउनलोड नहीं कर सकता है के लिए: demo5.fla में

मेरे ActionScript कोड (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); 
    } 
} 

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> 

और अंत में जावास्क्रिप्ट कोड:

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

कुछ Huffman संपीड़न स्वतंत्र रूप से उपलब्ध है, उदाहरण के https://github.com/wilkerlucio/huffman_js के लिए की जावास्क्रिप्ट पुस्तकालय लेकिन मुझे लगता है कि अपने काम है क्योंकि जावास्क्रिप्ट के साथ असंभव है और यह ब्राउज़र या ग्राहक के स्मृति में विशाल डेटा लोड करने के संभव नहीं है HTML।

Answer 3

यदि किसी भी कारण से आप सभी प्रमुख ब्राउज़रों के लिए जावास्क्रिप्ट में काम करने का कोई समाधान नहीं प्राप्त कर सकते हैं, तो मुझे यहां एएस 3 संपीड़न पुस्तकालय पता है: http://code.google.com/p/ascompress/।

इसके अलावा, एक कम कूलर विकल्प, यदि आपके लक्षित उपयोगकर्ता कुछ तकनीकी समझदार हैं तो उन्हें xml की .zip फ़ाइल क्यों अपलोड नहीं की गई है? फिर सर्वर साइड पर आप अनज़िप और इस प्रक्रिया के रूप में की जरूरत है।

सर्वर पक्ष पर किसी भी तरह से आप अनजिप/डिकंप्रेस करना चाहते हैं, जो समाधान के लिए Google के लिए आसान होना चाहिए यदि आपके पास पहले से कोई दिमाग नहीं है। ।

Answer 4

सिल्वरलाइट साथ, आप ग्राहक पक्ष पर फ़ाइलें ज़िप कर सकते हैं और यह दृष्टिकोण सभी प्रमुख ब्राउज़रों में काम करता है। इसके अलावा, आप जावास्क्रिप्ट के माध्यम से अपने सिल्वरलाइट विजेट से बातचीत कर सकते हैं। इसके अलावा, एक उपयोगकर्ता कई फ़ाइलों को अपलोड करने की जरूरत है, अपने सिल्वरलाइट विजेट सभी फाइलों को चुनने के लिए एक एकल संवाद दिखा सकते हैं। एकमात्र कमी यह है कि आपके क्लाइंट को सिल्वरलाइट प्लगइन स्थापित करना होगा।

Answer 5

यह अन्य stackoverflow post की समीक्षा करने पर विचार करें। दोनों उत्तरों को पेंटिंग संपीड़न वास्तविकता की एक अच्छी तस्वीर पेंट।

मैं एक फ्लेक्स के सिल्वरलाइट समाधान है कि ग्राहक के पक्ष संपीड़ित करता है और यदि उपयोगकर्ता यह स्थापित करने के लिए नहीं चाहता है, सेक और फ़ाइल सर्वर साइड संपीड़न हटाने को लागू करने पर विचार कर रहा हूँ। समाधान मिलने पर इस पोस्ट को अपडेट किया जाएगा।

नियंत्रण स्थापित कर रहा है समय की बचत होती है, जो सामान्य रूप से सच है के रूप में उपयोगकर्ता को बेचा जाएगा। सर्वर के लिए, यह एक बैंडविड्थ और संपीड़न प्रसंस्करण सेवर होगा।

Answer 6

आप JSZip का उपयोग कर सकते हैं। इनपुट के लिए, यह String/ArrayBuffer/Uint8Array/Buffer, लेकिन नहींblob रों का समर्थन करता है, जो कि आप जावास्क्रिप्ट के साथ एक <input type="file"/> से क्या मिलेगा:

एक फ़ाइल वस्तु एक ब्लॉब के विशिष्ट प्रकार होता है, और किसी भी संदर्भ में इस्तेमाल किया जा सकता है कि एक ब्लॉब

(link)

तो तुम जैसे को ब्लॉब/फ़ाइल बदलने करना होगा कर सकते हैं पहले एक ऐरेबफर, उदा। FileReader.readAsArrayBuffer() का उपयोग कर। ध्यान दें कि यह फ़ंक्शन कॉलबैक उपयोग की मांग करते हुए असीमित रूप से काम करता है। FileReaderSync भी उपलब्ध है, फिर भी "यह इंटरफ़ेस केवल श्रमिकों में उपलब्ध है क्योंकि यह सिंक्रोनस I/O को सक्षम करता है जो संभावित रूप से अवरुद्ध हो सकता है", इसलिए मुझे इसका उपयोग करने में कोई अच्छा दिखाई नहीं देता है।

(संपादित करें। मुझे यकीन है कि नहीं कर रहा हूँ, लेकिन मेरा मानना ​​है कि आप अब blob-> ArrayBuffer रूपांतरण को छोड़ सकते हैं और केवल फ़ाइल वस्तु ज़िप।)

इस पूरे दृष्टिकोण विशेष रूप से उपयोगी है, तो php के निर्देश max_file_uploads था अपने वेबस्पेस मेजबान द्वारा एक छोटी संख्या के लिए सेट, अब है कि आपको बस करना होगा के लिए के बारे में upload_max_filesize

संदर्भ के लिए, एक कोड नमूना अंश में एक multiple फ़ाइल इनपुट के कई फ़ाइलें रखने के लिए (JQuery का प्रयोग करके) इस प्रकार है जमा करने से पहले एक ज़िप:

// 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 

सर्वर-साइड-वार, आप $_FILES["fileZip"] तक पहुंच पाएंगे।