JS读取input里的图片内容？？最好不需要用到addEventListener？请帮忙修改一下代码！急，在线等候大家赐教！！

<!DOCTYPE HTML>
<html>
<head>
  <title>Canvas </title>
  <style type="text/css">
    .thumb {
    height: 75px;
    border: 5px solid #000;
    margin: 20px 10px 0 0;
  }
  </style>
</head>
<body>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
  imageLocations = new Array();
  dataURL = new Array(files.length);
document.getElementById('files').addEventListener('change', test, false);
    function test(evt) {
        var files = evt.target.files; // FileList object
        for (var i = 0, f; f = files[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var canvas = document.createElement("canvas");
            dataURL[i] = canvas.toDataURL("image/png");
             imageLocations[i] = " '" + dataURL[i] + "'";
            alert(imageLocations[i]);

        }
    }
</script>
</body>
</html>
我的想法是，不要用addEventListener事件监听来触发test函数，因为那样的话函数处理得到的imageLocations数组的结果，就不能再让其它外部函数调用了。所以希望能够通过其它方法，也可以读取到input里的图片内容，然后把读取到的内容让test函数来处理...哈哈这样的话其它外部函数就能够调用处理得到的数组了！！有没有其它方法读取到input里的图片内容呢？？麻烦大家了....谢谢！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

document.getElementById('files').onchange=test不行吗
不很明白你的意思
很谢谢你！！这样子是可以！！但它和document.getElementById('files').addEventListener('change', test, false);
是一样的方法啊！！我不想当文件选择完毕，它马上就开始执行test函数，其它地方还怎么调用这函数啊？就算调用了也没用啊，你都没有给它提供图片。（这个test函数的功能是用来把图片转换成base64编码的，但前提是得提供图片给这个函数啊！怎么给test提供图片？）最好就是把提供图片的方法也能够放在test函数里面，等到其它地方需要的时候也就能调用这个函数。那该怎么样实现？？
imageLocations = new Array();
  dataURL = new Array(files.length);
document.getElementById('button').addEventListener('click', test, false);//单击按钮触发
    function test() {
        var files = document.getElementById('files'); // FileList object
        for (var i = 0, f; f = files[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var canvas = document.createElement("canvas");
            dataURL[i] = canvas.toDataURL("image/png");
             imageLocations[i] = " '" + dataURL[i] + "'";
            alert(imageLocations[i]);

        }
    }
如果你是想做上传前的预览，那可以。
如果你是想取到input的值，做其它用。那是做不到的。为了安全。浏览器不允许你取这个输入框的值。
即使是做预览，取到的也只是一个字符串。你用不上。但是预览可以用。
嗯！！我想问一下，这段执行完之后，数组imageLocations = new Array()的值会保存下来吗？在外部其它地方可以调用imageLocations的值吗？
imageLocations是一个全局变量，当然可以保存（页面不刷新）
其他地方当然可以调用了