0

尝试了站点内的所有内容，对其进行了测试，按照说明进行操作，但无济于事，我哪里出错了？

网站：http ://www.xul.fr/en/html5/filereader.php

我想要做的是上传一张图片并通过javascript或不使用任何服务器将其临时存储在网页中，我尝试编译代码：

<!DOCTYPE HTML>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) 
  document.write("<b>File API supported.</b> <br />");
else
  document.write('<i>File API not supported by this browser.</i> <br />');
</script>

<form name="form1" method="post" action>
    <input type="file" id="getimage">
</form>

<script language="javascript" >

function imageHandler(e2) 
{ 
    var store = document.getElementById('imgstore');
    store.innerHTML='<img src="' + e2.target.result +'">';
}
function loadimage(e1)
{
    var filename = e1.target.files[0]; 
    var fr = new FileReader();
    fr.onload = imageHandler;  
    fr.readAsDataURL(filename); 
}
window.onload=function()
{
    var x = document.getElementById("filebrowsed");
    x.addEventListener('change', readfile, false);
    var y = document.getElementById("getimage");
    y.addEventListener('change', loadimage, false);
}

</script>

<fieldset><legend>Your image here</legend>
    <div  id="imgstore">
    </div>
</fieldset>

</html>

我认为他有一些嵌入式脚本，或者我不知道我实际上遵循了他所说的任何提示？或任何想法？

OT：对于之前含糊不清的帖子感到抱歉，感觉不舒服，也没有心情，但我需要完成这项工作，谢谢。

4

1 回答 1

3

首先，我没有在您的页面上看到正确的 HTML 元素，也没有看到您已连接到 x 上的事件侦听器的“readfile”函数。

其次，您不是在上传图像，而是在阅读它。而且您不是在存储图像，而是在显示它。

现在这已经不成问题了。

要使用文件阅读器，我们需要输入 type="file"。正如您正确复制的那样，我们需要在该元素上添加一个事件侦听器，以侦听“更改”事件。在连接到事件侦听器的函数内部，我们需要创建一个 FileReader 对象并 readAsDataURL 来自事件的数据。检查，我们也得到了。现在我们可以在 Reader 对象上连接完成加载的函数。在这个函数中，我们想要创建一个新的 Image() 并将它的 src 属性分配给 FileReaders 加载的结果。为了显示图像，我们还需要监听图像上的加载事件，我们只需将图像附加到页面的任何需要去的地方。

所以代码可能看起来像这样。

var imageLoader = document.getElementById('getimage');
imageLoader.addEventListener('change', handleImage, false);


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            document.body.appendChild(img);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}
于 2013-01-05T04:57:36.170 回答