asp.net - Client side compression with HTML5 and Javascript - Stack Overflow

admin管理员组

文章数量:1325532

Am working on a web application and we allow users to upload files to our server. Am trying to do client side pression before uploading files to the server. What would be the better way to achieve this using HTML5 and JavaScript.

Thanks.

Am working on a web application and we allow users to upload files to our server. Am trying to do client side pression before uploading files to the server. What would be the better way to achieve this using HTML5 and JavaScript.

Thanks.

• javascript
• asp
• html

Share Improve this question Follow edited Nov 17, 2011 at 14:56 Joel Coehoorn 416k114114 gold badges578578 silver badges813813 bronze badges asked Aug 22, 2011 at 17:54 QuestionQuestion 3111 silver badge33 bronze badges 3

• Telling the user to only upload zipped files. :) Can you actually zip files using javascript? doubt it since it has to be done throu – Icarus Commented Aug 22, 2011 at 18:46
• It is possible. See my answer ;-) – heinob Commented Apr 28, 2013 at 8:51
• Here is now a modern answer to this question – Mikko Ohtamaa Commented May 25, 2024 at 12:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

In 2022 it's almost too simple, if the browser supports CompressionStream, FormData and Response.

In the example below I use FormData to collect all the fields from the form. Then I use the readable stream from the file, and pipe it though the pression stream. Then I use Response to read everything from the pressed stream and return it in a blob.

async function press(file, encoding = 'gzip') {
  try {
    return {
      data: await new Response(file.stream().pipeThrough(new CompressionStream(encoding)), {
        headers: {
          'Content-Type': file.type
        },
      }).blob(),
      encoding,
    };
  } catch (error) {
    // If error, return the file unpressed
    console.error(error.message);
    return {
      data: file,
      encoding: null
    };
  }
}

theForm.addEventListener(
  'submit',
  (event) => event.preventDefault()
)

theForm.addEventListener(
  'input',
  async function(event) {
    // collect all fields
    const fd = new FormData(theForm);

    // Get 'file handle' from imput elemen
    const file = fd.get('theFile');
    if (!file) return

    const encoding = fd.get('theEncoding');
    const pressed = await press(file, encoding);

    theMessage.value = [
      'Compressed with', pressed.encoding,
      'Source file was', file.size, 'bytes',
      'and the pressed file', pressed.data.size,
      'saving', ((1 - pressed.data.size / file.size) * 100)
      .toFixed(0),
      '%.'
    ].join(' ')
  }
)

form>* {
  display: block;
  width: 100%;
}

<form id="theForm">
  <select name="theEncoding">
    <option>gzip</option>
    <option>deflate</option>
    <option>deflate-raw</option>
  </select>
  <input type="file" name="theFile" id="theFile">

</form>
<output id="theMessage"></output>

The mon mechanism to do what you want is using FileReader and a JavaScript client-side pression library (i.e. pressjs).

本文标签： aspnetClient side compression with HTML5 and JavascriptStack Overflow