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

时间：2022-01-01 19:34:12


<!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里的图片内容呢？？麻烦大家了....谢谢！！

6 个解决方案

#1

document.getElementById('files').onchange=test不行吗 
不很明白你的意思

#2

引用 1 楼  的回复:
document.getElementById('files').onchange=test不行吗 
不很明白你的意思

很谢谢你！！这样子是可以！！但它和document.getElementById('files').addEventListener('change', test, false);
是一样的方法啊！！我不想当文件选择完毕，它马上就开始执行test函数，其它地方还怎么调用这函数啊？就算调用了也没用啊，你都没有给它提供图片。（这个test函数的功能是用来把图片转换成base64编码的，但前提是得提供图片给这个函数啊！怎么给test提供图片？）最好就是把提供图片的方法也能够放在test函数里面，等到其它地方需要的时候也就能调用这个函数。那该怎么样实现？？

#3

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]);
           
        }
    } 

#4

如果你是想做上传前的预览，那可以。
如果你是想取到input的值，做其它用。那是做不到的。为了安全。浏览器不允许你取这个输入框的值。
即使是做预览，取到的也只是一个字符串。你用不上。但是预览可以用。

#5

引用 3 楼  的回复:
imageLocations = new Array();
  dataURL = new Array(files.length);
 document.getElementById('button').addEventListener('click', test, false);//单击按钮触发
    function test() {
        var files = doc……

嗯 ！！我想问一下，这段执行完之后，数组imageLocations = new Array()的值会保存下来吗？在外部其它地方可以调用imageLocations的值吗？

#6

imageLocations是一个全局变量，当然可以保存（页面不刷新）
其他地方当然可以调用了

#1

document.getElementById('files').onchange=test不行吗 
不很明白你的意思

#2

引用 1 楼  的回复:
document.getElementById('files').onchange=test不行吗 
不很明白你的意思

很谢谢你！！这样子是可以！！但它和document.getElementById('files').addEventListener('change', test, false);
是一样的方法啊！！我不想当文件选择完毕，它马上就开始执行test函数，其它地方还怎么调用这函数啊？就算调用了也没用啊，你都没有给它提供图片。（这个test函数的功能是用来把图片转换成base64编码的，但前提是得提供图片给这个函数啊！怎么给test提供图片？）最好就是把提供图片的方法也能够放在test函数里面，等到其它地方需要的时候也就能调用这个函数。那该怎么样实现？？

#3

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]);
           
        }
    } 

#4

如果你是想做上传前的预览，那可以。
如果你是想取到input的值，做其它用。那是做不到的。为了安全。浏览器不允许你取这个输入框的值。
即使是做预览，取到的也只是一个字符串。你用不上。但是预览可以用。

#5

引用 3 楼  的回复:
imageLocations = new Array();
  dataURL = new Array(files.length);
 document.getElementById('button').addEventListener('click', test, false);//单击按钮触发
    function test() {
        var files = doc……

嗯 ！！我想问一下，这段执行完之后，数组imageLocations = new Array()的值会保存下来吗？在外部其它地方可以调用imageLocations的值吗？

#6

imageLocations是一个全局变量，当然可以保存（页面不刷新）
其他地方当然可以调用了
标签：

相关文章