安全的方法，以基于JavaScript的MD5值传递给PHP

Question

我试图写一个脚本上传多个图像文件将检查MD5哈希为每个图像文件begore上传到服务器

代码片段：

<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值

理由：里面的文件读取功能的I已被设置为3，如果3个文件生成，因为它设为总没有选择要上传

所以整体文件，请建议如何解决增加cookie名称值。

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

也：有没有更好的方式来传递变量值到PHP除Cookie或隐藏的输入变量外。

Answer 1

循环结束后，函数级变量i的值为3，这就是函数“看到”的内容。

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

阅读this博客文章了解更多信息。

Answer 2

泰克斯亚历山大，你的建议没有工作！

这里有什么修补需要解决它。我张贴它的情况下，其他人可能会陷入类似的情况。

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

setCookie('cookie_'+index, element); 

让的说5个文件选择上传，则​​指数值已经是5， 所以现在的cookie名称，而不是在获得增量顺序，将仅设置为“cookie_5”

这里解决办法在于使用array.prototype.forEach回路功能 这样可以解决已有的索引值的范围的问题..

阵列。的forEach（参数），基本上它为了横穿阵列的每个值

// 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检查，饼干名称如下CK0，CK1，CK2与它们对应的md_5哈希值

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

PS注：在的jsfiddle的运行的代码 ：为了简单起见，一个函数randomString（）被用于生成一个随机字符串，而不是调用MD5哈希脚本。