Need to ZIP the selected file from Client machine when uploading (using JSZIP) in .Net Web App. The zipped file should be uploaded to server location

问题

I am new to using JSZIP and may be asking an obvious question. But here goes:

I am using the File Upload control to upload a file to server. The source file is in a path on the Client. The destination file should be on Server.

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jszip demo</title>
        <script type="text/javascript" src="../Scripts/jszip.js"></script>
        <script type="text/javascript" src="../Scripts/jszip-load.js"></script>
        <script type="text/javascript" src="../Scripts/jszip-deflate.js"></script>
        <script type="text/javascript" src="../Scripts/jszip-inflate.js"></script>

        <script type="text/javascript">

            function zipFileAndUpload() 
            {
                var myFileUploadControl1 = document.getElementById('myFileUploadControl1');
                var FILENAMEABSOLUTE = myFileUploadControl1.value;

                var zip = new JSZip(FILENAMEABSOLUTE);
                zip.file(FILENAMEABSOLUTE);
                var content = zip.generate({ type: "blob" });
                //
                // Other Code Here
                //
            }

        </script>
    </head>
        <body>
            <form id="form1" runat="server">
                <asp:FileUpload ID="myFileUploadControl1" runat="server"/>
                <input type="button" value="Select File" onclick="zipFileAndUpload()"/>
            </form>
        </body>
        </html>

My requirement is that when the client selects the file, it should be Zipped using JSZIP in javascript and then uploaded to server.

I have tried to find a solution to this but get nothing. Also my solution that I have tried till now has not worked.

I need to read the file on Client computer as selected by 'myFileUploadControl1'.
Zip and keep the file in local RAM or Client machine.
Upload on the server after this on the SERVER path.

Can anyone help me?

回答1:

Once your zip is constructed, you can post it to the server using jQuery as follows.

var zipData = zip.generate({ type: "base64" });

var formData = new FormData();
formData.append('zipData', zipData);

var postToServer = $.ajax({
    type: "POST",
    url: "Upload", // My server-side MVC controller has an action named Upload
    data: formData,
    processData: false,
    contentType: false,
});

postToServer.done(function () {
    ...
});

postToServer.fail(function( jqXHR, textStatus ) {
    ...
});

At the server end you will need code to receive the data stream and save it there using whatever server-side technology you've chosen.

回答2:

I don't have time right now to post my exact code, and this question is old and abandoned.

But the benefit of ZIP on client is indeed that you can upload multiple files in one. This may have been different 5 years ago. But the outline of the solution is this:

you use the file chooser object to get the File objects
you create a JZIP object and you create workers with the File objects
finally you submit your zip file by sending it to the XHR object.

This can all be done very neatly in a streaming fashion, but in order to enjoy doing that you need to absolutely learn to use continuation-passing style coding in JavaScript and never assume synchronous returns from functions with the data ready to go. (A common beginner's mistake, and a constant pain for those people who don't completely embrace the continuation passing style as a beautiful concept.)

If there is any interest / replies / comments / upvotes I will come back and paste some code from my working version.

来源：https://stackoverflow.com/questions/21125109/need-to-zip-the-selected-file-from-client-machine-when-uploading-using-jszip-i

标签

javascript

c#-4.0

jszip