javascript - 使用上述网站上传图像并将其临时存储在网页中

标签 javascript ajax html

尝试了网站内的所有内容,进行了测试,按照说明进行操作,但无济于事,我哪里出了问题?

网站: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”函数。

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

现在这已经不成问题了。

要使用文件阅读器,我们需要一个输入类型="file"。当您正确复制时,我们需要在该元素上添加一个事件监听器,监听“更改”事件。在连接到事件监听器的函数内部,我们需要创建一个 FileReader 对象并从事件中读取数据。检查一下,我们也得到了。现在我们可以连接 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]);     
}

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

相关文章:

html - 我需要在不编辑 index.html 或 normalize.css 的情况下执行 css 任务

javascript - 单击按钮时 Chrome 扩展程序不播放声音?

javascript - Angular - 如何在 Angular ui Accordion 上正确应用 is-open 属性?

javascript - node.nextSibling 和 ChildNode.nextElementSibling 有什么区别?

c# - 未知的网络方法,尝试使用 AJAX 发送 json

jQuery 1.8.1 .load html>body

javascript - 如何使用 javascript 显示视觉效果

javascript - 触发 AJAX 表单提交时站点重新加载

html - XML 数据未显示在 HTML 文件中

javascript - 如何使文本显示在图像映射区域的单独 div onClick 中?