我写了一些 JavaScript 代码。它在本地运行时有效,但在 IIS 下托管时无效。它在某些浏览器下也不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SHOUT</title>
<script language="javascript" type="text/javascript">
var base64;
var img=document.createElement("img");
var canvas = document.createElement("canvas");
function f()
{
alert("123");
p=document.getElementById("picField").value;
alert(p);
img.setAttribute('src', p);
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
// debugger;
//var dataURL = canvas.toDataURL("image/png");
var r=dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
base64=r;
alert(base64);
}
function getBase64Image()
{
p=document.getElementById("picField").value;
img.setAttribute('src', p);
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
var dataURL = canvas.toDataURL("image/png");
var r=dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
base64=r;
alert(base64);
}
</script>
</head>
<body id="index" class="home">
<input type="file" id="picField" onchange="f()" >
<input type="submit" value="Post" class="submit" onclick="getBase64Image()"/>
</body>
</html>
它工作正常,但在 i 上无法正常工作,请帮助
最佳答案
您的问题是这样的:您正试图通过 Javascript 从客户端计算机加载图片。您从 <input type="file" />
中获取值然后立即尝试显示它。您只能在具有默认 IE 设置的本地主机上执行此操作。 Javascript 仅限于互联网场景;您不希望客户端脚本访问您的文件系统并在您不知情的情况下将内容发布到服务器。
事实上,alert(p);
行在函数中 f()
在您的机器上运行时应该显示不同的值,而不是从 IIS 提供服务。在 IIS 中,它不应显示完整路径,而应仅显示文件名。如何解决这个问题?最简单的方法是将站点添加到 Internet 选项中的“受信任的站点”列表中,但显然您不能强制用户这样做。
我以前打过这场仗,我能想出的唯一无缝解决方案是将图片上传到服务器,然后给用户一个他们可以操作的预览。
new File APIs with HTML5将提供您正在寻找的所有功能,但目前还没有全面支持。
关于javascript - base64 javascript 不在 iis 上运行,在某些浏览器中也是如此,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9544814/