admin管理员组

文章数量:1434909

I am trying to encrypt all files within a folder located on client side. I have the below code, but getting an error. I am not entirely sure about the error.

ERROR: Uncaught TypeError: Cannot read property 'length' of undefined(…) at line 16 in html.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Get Directory</title>
    <script src=".10.2/jquery.min.js"></script>
    <script src="assets/js/aes.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
        $("#file-input").on("change", function(e){
            var thefiles = e.target.files;
            var reader = new FileReader();
            $.each(thefiles, function(i, item){
                var thefile = item;
                reader.onload = function(){
                    var encrypted = CryptoJS.AES.encrypt(thefile, '12334');
                };
                reader.readAsDataURL(thefile);
                $("#thelist").append("FILES: " + thefile.name + "<br />");;
            });
        });
    });
    </script>
</head>
<body>
    <input type="file" id="file-input" webkitdirectory="" directory="">
    <div id="thelist"></div>
</body>
</html>

I am trying to encrypt all files within a folder located on client side. I have the below code, but getting an error. I am not entirely sure about the error.

ERROR: Uncaught TypeError: Cannot read property 'length' of undefined(…) at line 16 in html.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Get Directory</title>
    <script src="http://cdnjs.cloudflare./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="assets/js/aes.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
        $("#file-input").on("change", function(e){
            var thefiles = e.target.files;
            var reader = new FileReader();
            $.each(thefiles, function(i, item){
                var thefile = item;
                reader.onload = function(){
                    var encrypted = CryptoJS.AES.encrypt(thefile, '12334');
                };
                reader.readAsDataURL(thefile);
                $("#thelist").append("FILES: " + thefile.name + "<br />");;
            });
        });
    });
    </script>
</head>
<body>
    <input type="file" id="file-input" webkitdirectory="" directory="">
    <div id="thelist"></div>
</body>
</html>
  • javascript
  • jquery
  • encryption
  • filereader
  • cryptojs
Share Improve this question edited Nov 7, 2016 at 21:45 Endless 38.2k13 gold badges116 silver badges137 bronze badges asked Nov 7, 2016 at 20:38 NoobNoob 671 gold badge5 silver badges14 bronze badges 2
  • Think of what you're doing in the $.each – Adam Wolski Commented Nov 7, 2016 at 20:46
  • Looping through the files in selected folder. – Noob Commented Nov 7, 2016 at 20:58
Add a ment  | 

1 Answer 1

Reset to default 2

Read all ments

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Get Directory</title>
    <!-- Update your jQuery version??? -->
    <script src="http://cdnjs.cloudflare./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="assets/js/aes.js"></script>
    <script> // type="text/javascript" is unnecessary in html5

    // Short version of doing `$(document).ready(function(){`
    // and safer naming conflicts with $
    jQuery(function($) { 

        $('#file-input').on('change', function() {

            // You can't use the same reader for all the files
            // var reader = new FileReader

            $.each(this.files, function(i, file) {

                // Uses different reader for all files
                var reader = new FileReader

                reader.onload = function() {
                    // reader.result refer to dataUrl
                    // theFile is the blob... CryptoJS wants a string...
                    var encrypted = CryptoJS.AES.encrypt(reader.result, '12334')
                }

                reader.readAsDataURL(file)
                $('#thelist').append('FILES: ' + file.name + '<br>')
            })
        })
    })
    </script>
</head>
<body>
    <input type="file" id="file-input" webkitdirectory="" directory="">
    <div id="thelist"></div>
</body>
</html>

btw, browsers has a modern standard Crypto lib built in... Maybe try using that instead? and if necessary use a polyfill?

本文标签： javascriptFile encryption using CryptoJSClient sideStack Overflow

版权声明：本文标题：javascript - File encryption using CryptoJS - Client side - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745632032a2667334.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。