Question

我正在尝试编写一个用于上传多个图像文件的脚本，该脚本将检查每个图像文件的md5哈希值，然后上传到服务器

代码段：

<script type="text/javascript">
var log = document.getElementById("hash_log");
var hash_array = [];

$("#screenshot").change(function() {
  handleFiles(this.files);
});
function handleFiles(files) {
    for (var i=0; i<files.length; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var binary = event.target.result;
            var md5_hash = calcMD5(binary).toString()
            hash_array[i]= md5_hash; // array to store hash value
            registerLog(hash_array[i]); // to show hash value, just for testing purpose

            setCookie( 'cookie_'+i, hash_array[i] ); // generate cookie in incremetal order, issue line
        };
        reader.onerror = function() {
            console.error("Could not read the file");
        };

        reader.readAsBinaryString(files.item(i));
    }
}

// for geneaarted hash values
function registerLog(str, className) {
    var elem = document.createElement("div");
    elem.innerHTML = str;
    elem.className = "alert-message" + (className ? " "  + className : "");
    log.appendChild(elem);
}

// function for setting cookies...
function setCookie(name, value) {
    var argv = setCookie.arguments;
    var argc = setCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape(value) + 

        ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
        ((path == null) ? "" : ("; path=" + path)) + 
        ((domain == null) ? "" : ("; domain=" + domain)) + 
        ((secure == true) ? "; secure" : "");
}
</script>

现在，图像文件的哈希生成正常，但为了比较服务器端处理的这些值

我正在使用cookie来传递价值

现在在第16行，设置cookie的代码：

        setCookie( 'cookie_'+i, hash_array[i] );

所以cookie名称应该是增量顺序，如：cookie1，cookie2，cookie3等...... 但它只设置cookie3的哈希值

原因：在文件读取功能中，如果生成了3个文件，则i已经设置为3，因为它设置为选择上传的文件总数

总的来说，请建议一个如何增加cookie名称值的解决方案。

我现在坚持了2天，尝试了很多方法，但似乎现在唯一的办法是发布情况..

另外：有没有更好的方法将变量值传递给php，而不是cookie或隐藏的输入变量。

Answer 1

循环终止后，函数级变量i的值为3，这就是reader.onload函数'看到的'。

您可以使用Array.prototype.forEach来避免这些范围问题。

阅读this博文，了解有关该主题的更多信息。

Answer 2

Thaks alexander，你的建议确实有效!!

这里需要解决它的修补。我发布以防万一，其他人可能会遇到类似的情况。

我们的问题是： onload文件函数将i的计数器作为所选文件的总数。在这种情况下，当调用以下用于设置cookie名称的函数时：

setCookie('cookie_'+index, element);

假设选择了5个文件进行上传，那么索引值已经是5，所以现在cookie名称而不是增量顺序，只会设置为'cookie_5'

这里的解决方案在于使用array.prototype.forEach循环函数这解决了现有指数值的范围问题。

array.forEach（argument），基本上它按顺序遍历数组的每个值

// create an empty array ck_array for entering new hash strings to it
 var ck_array = [];

// main function
function handleFiles(files) {
    for (var i=0; i<files.length; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var binary = event.target.result;
            var md5_hash = calcMD5(binary).toString()
            hash_array[i]= md5_hash; // array to store hash value
            registerLog(hash_array[i]); // to show hash value, just for testing purpose

            // code for array.prototype to work

            ck_array.push(md5_hash);
            if(ck_array.length == x){
                ck_array.forEach(function(element, index, array) {
                    setCookie('ck'+index+': ', element);
                });     
            }
        };
        reader.onerror = function() {
            console.error("Could not read the file");
        };

        reader.readAsBinaryString(files.item(i));
    }
}

现在，如果我们签入设置cookie，cookie名称为ck0，ck1，ck2及其对应的md_5哈希值

这是jsfiddle：http://jsfiddle.net/madhvik/vpwLxph9/1/

PS说明：在jsfiddle的运行代码中：为简单起见，函数randomString（）用于生成随机字符串，而不是调用md5哈希脚本。

将基于javascript的md5值传递给PHP的安全方法

2 个答案: