Javascript 上传图像，并使用上述网站临时存储在网页内_Javascript_Ajax_Html

Javascript 上传图像，并使用上述网站临时存储在网页内

javascript ajax html

Javascript 上传图像，并使用上述网站临时存储在网页内,javascript,ajax,html,Javascript,Ajax,Html,尝试了网站内的所有东西，测试了它，按照说明操作，但没有结果，我哪里出了问题地点：我试图做的是上传一个图像，并通过javascript将其临时存储在网页中，或者在不使用任何服务器的情况下，我尝试编译代码： <!DOCTYPE HTML> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script&g

尝试了网站内的所有东西，测试了它，按照说明操作，但没有结果，我哪里出了问题

地点：

我试图做的是上传一个图像，并通过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>


if（window.File&&window.FileReader&&window.FileList&&window.Blob）
document.write（“支持文件API.
”）；
其他的
document.write（'此浏览器不支持文件API。
'）；
函数imageHandler（e2）
{ 
var store=document.getElementById（'imgstore'）；
store.innerHTML=''；
}
函数加载映像（e1）
{
var filename=e1.target.files[0]；
var fr=new FileReader（）；
fr.onload=imageHandler；
fr.readAsDataURL（文件名）；
}
window.onload=function（）
{
var x=document.getElementById（“文件浏览”）；
x、 addEventListener（'change'，readfile，false）；
var y=document.getElementById（“getimage”）；
y、 addEventListener（'change'，loadimage，false）；
}
你在这里的形象

我想他有一些嵌入式脚本，或者我不知道我实际上是按照他说的做的有什么头绪吗？或者有什么想法

OT:很抱歉之前发布了一篇含糊不清的帖子，我感觉不舒服，也没心情，但我需要让它工作起来，谢谢。

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

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

现在这就不碍事了

要使用文件读取器，我们需要输入type=“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]);     
}

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

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

现在这就不碍事了

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

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