关于javascript，读取多张本地图片的问题。求指点指点....

下面这个是HTML页面的代码
<!DOCTYPE HTML>
<html>
<head>
  <title>Canvas Based Thumbnail</title>
  <style type="text/css">
    body {
    background: black;
    color: red;
    /*font: 20pt Cambria, Georgia, Times, Times New Roman, serif;*/
    font: 24pt Baskerville, Times, Times New Roman, serif;/*Baskerville  一种字体*/
    padding: 0;
    margin: 0;
    overflow: hidden;  
/*overflow 属性规定当内容溢出元素框时发生的事情。*/
    }

  </style>
  <script type="text/javascript" src="thumbnail.js"></script>
</head>
<body>
  <input id="viewFiles" type="file" multiple/>
  <img id="viewImg" src="data:image/png;base64,fsdfsdf" style="max-width:500px"/>
  <canvas id="canvas"></canvas>
</body>
</html>  
然后下面这段是JS代码的一部分；请帮忙修改一下或者指导一个新的解决方法给小弟，感激不尽...

var imageLocations = [
'1.jpg',
'2.jpg',
'3.jpg',
'4.jpg'
];
          var viewFiles = document.getElementById("viewFiles");
 var viewImg = document.getElementById("viewImg");
   function viewFile (file) {

        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg.src = evt.target.result;//e.target.result就是base64编码        }
     imageLocations= reader.readAsDataURL(file);//FileReader 对象可以读取文件的 Base64编码数据
    }
    viewFiles.addEventListener("change", function () {for(i=0;i<files.length;i++){
        //通过 this.files 取到 FileList ，这里只有一个files[0]
        viewFile(this.files[i]);};
    }, false);其中var imageLocations = [
'1.jpg',
'2.jpg',
'3.jpg',
'4.jpg'
];里的jpg文件是和html文件js文件在同一个文件夹的。我现在要的是把上面的jpg文件换成是电脑里的其它文件夹里的jpg文件。小弟我的想法是把reader.readAsDataURL(file）取到的多张图片的内容赋值给imageLocations数组，从代替上面的那些'1.jpg','2.jpg','3.jpg','4.jpg'，从而实现能够取到电脑里的其它文件夹里的多张图片。但事实我上面的做法并不可行（这时我把var imageLocations = [
'1.jpg',
'2.jpg',
'3.jpg',
'4.jpg'
]换成了imageLocations=new Array ();），求各位大侠指点.....谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢