尝试了网站上的所有内容,对其进行了测试,并按照说明进行了操作,但无济于事,我在哪里出错了?

网站: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:很抱歉之前的帖子含糊不清,不舒服,没有心情,但是我需要感谢这项工作。

最佳答案

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

其次,您没有上传图像,而是在阅读图像。而且您没有存储图像,而是在显示图像。

现在,这已不复存在。

要使用文件阅读器,我们需要输入type =“ file”。正确复制后,我们需要在该元素上添加一个事件侦听器,以侦听“更改”事件。在连接到事件侦听器的函数内部,我们需要创建一个FileReader对象,并将事件中的数据readAsDataURL读取。检查,我们也知道了。现在,我们可以将函数连接起来,以完成在Reader对象上的加载。在此函数内部,我们要创建一个新的Image()并将其src属性分配给FileReaders加载的结果。要显示图像,我们还需要侦听图像上的load事件,我们只需将图像添加到页面上任何需要的地方即可。

因此,代码可能看起来像这样。

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

关于javascript - 使用该网站上传图片并将其临时存储在网页中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14168578/

10-09 21:37