compress file at client-side

Question

I want to upload a file to server, but is there any way(using javascript) to compress the image at client-side before upload?

Answer 1

Big update: in html5 you have access to a previously selected file(-list) with javascript! Detailed informations: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

In IE you can instantiate ActiveX controls, which theoretically would allow you to do anything you liked client side. However (and its a BIG however) its likely to ring alarm bells for must users/browsers from a security standpoint.

Code to instantiate an ActiveX control from JavaScript:

var myObject = new ActiveXObject('MyObject.MyControl');

Answer 3

No, simply not possible with javascript: you won't be able to access the raw data from javascript. You'll need to use a browser plugin such as java applet, flash or (since you're working with asp.net) Silverlight.

You could check out the existing open source control from codeplex: http://www.codeplex.com/SilverlightFileUpld

Answer 4

If what you want is to zip data instead of a file, it is possible: see this SO question. However, you need access to the data in the JavaScript.

Answer 5

An image would tend to be compressed anyway so attempting to do any further client-side compression would probably yield little or no return.

Hope this helps.

Answer 6

There is a way to compress an image in JavaScript: http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_javascript

I doubt this will let you upload the compressed version to the server though. I'm pretty sure you will need to use something Flash or Java based.

Flash is able to do JPEG compression AFAIK. There are also quite a few open source flash-based file uploaders out there. One of them, SWFUpload (http://swfupload.org/), already supports client-side image resizing in the latest alpha, which might be what you want. But if you want real compression (like JPEG) I'm sure you could extend SWFUpload to this for you.

Edit: It seems like SWFUpload is indeed doing all of this for you in the latest Alpha version. Check out the demo here: http://demo.swfupload.org/v250alpha1/resizedemo/index.php

I saw them mention that documentation for this is limited at the moment though.

The line in the JavaScript source you might be looking for is:

swfu.startResizedUpload(swfu.getQueueFile(0).id, 100, 100, SWFUpload.RESIZE_ENCODING.JPEG, 100);

Good Luck!

Answer 7

No, JavaScript does not have access to the file the user chooses in the browse dialog.

You could accomplish something like this using Flash or a Java applet, but it probably won't be worth the trouble.

Answer 8

As you do not have access to the data of the uploaded files this does not make much sense. You could use FlashPlayer 10 which has restricted access to the filesystem and offers compression of data (even in a appropriate speed).