最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to encrypt a binary file with HTML5 File API and upload to server - Stack Overflow

programmeradmin4浏览0评论

I need to encrypt and upload file to Apache/PHP server with HTML5 FileReader API and CryptoJS

I've done the following succesfully

  • Read file with FileReader API
  • Convert file to base64 with readAsDataURL() function
  • Encrypt it with the following

    CryptoJS.AES.encrypt(e.target.result, password);

But I couldn't manage to send it to server as a File object because I already converted it to text object and I can't convert back it to a file. The following is my javascript file and server-side snippet.


app.js

 var reader = new FileReader();

 // Read file callback!
 reader.onload = function (e) {

     // Use the CryptoJS library and the AES cypher to encrypt the 
     // contents of the file, held in e.target.result, with the password

     var encrypted = CryptoJS.AES.encrypt(e.target.result, password);


     //SEND FORM DATA
     var data = new FormData($("#fileinfo")[0]);

    /*The following line doesn't work because I'm not adding a File object, 
    * I'm adding file already converted to Base64 format
    */
     data.append('file-0','data:application/octet-stream,' + encrypted);

     $.ajax({
         url: 'upload.php',
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         type: 'POST',
         success: function (data) {
             //alert(data);
         }
     });

 };


upload.php

<?php
var_dump($_FILES); //prints empty array
var_dump($_POST); //prints file as string 
?>

I need to encrypt and upload file to Apache/PHP server with HTML5 FileReader API and CryptoJS

I've done the following succesfully

  • Read file with FileReader API
  • Convert file to base64 with readAsDataURL() function
  • Encrypt it with the following

    CryptoJS.AES.encrypt(e.target.result, password);

But I couldn't manage to send it to server as a File object because I already converted it to text object and I can't convert back it to a file. The following is my javascript file and server-side snippet.


app.js

 var reader = new FileReader();

 // Read file callback!
 reader.onload = function (e) {

     // Use the CryptoJS library and the AES cypher to encrypt the 
     // contents of the file, held in e.target.result, with the password

     var encrypted = CryptoJS.AES.encrypt(e.target.result, password);


     //SEND FORM DATA
     var data = new FormData($("#fileinfo")[0]);

    /*The following line doesn't work because I'm not adding a File object, 
    * I'm adding file already converted to Base64 format
    */
     data.append('file-0','data:application/octet-stream,' + encrypted);

     $.ajax({
         url: 'upload.php',
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         type: 'POST',
         success: function (data) {
             //alert(data);
         }
     });

 };


upload.php

<?php
var_dump($_FILES); //prints empty array
var_dump($_POST); //prints file as string 
?>
Share Improve this question asked Sep 2, 2014 at 15:47 Cihad TurhanCihad Turhan 2,8596 gold badges30 silver badges45 bronze badges 1
  • this functionality already implemented by me...while uploading it can you remove data:application/octet-stream cause of which you can't able to decrypt it – Arpit Srivastava Commented Sep 2, 2014 at 16:03
Add a ment  | 

1 Answer 1

Reset to default 5

I found the answer the new Draft on w3 Here is a working code if anyone need

var reader = new FileReader();

// Read file callback!
reader.onload = function (e) {

var encrypted = CryptoJS.AES.encrypt(e.target.result, password);

var data = new FormData($("#fileinfo")[0]);

var encryptedFile = new File([encrypted], file.name + '.encrypted', {type: "text/plain", lastModified: new Date()});

data.append('file[0]', encryptedFile);

$.ajax({
     url: 'upload.php',
     data: data,
     cache: false,
     contentType: false,
     processData: false,
     type: 'POST',
     success: function (data) {
         //alert(data);
     }
 });

};

reader.readAsDataURL(file);
发布评论

评论列表(0)

  1. 暂无评论