我已经写了一些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>
其工作正常,但在iis无法正常工作时,请帮助
解决方法:
您的问题是这样的：您正在尝试通过Javascript从客户端计算机加载图片.您可以从< input type =“ file” />获取值.然后立即尝试显示它.您只能在具有默认IE设置的localhost上执行此操作.在Internet场景中,JavaScript受限制；您不希望客户端脚本在您不知情的情况下访问文件系统并将内容发布到服务器.
实际上,行alert(p);在f()函数中,在计算机上运行时应显示不同的值,而不是由IIS提供.从IIS,它不应显示完整的路径,而仅显示文件名.如何解决这个问题？最简单的方法是将该站点添加到“ Internet选项”的“受信任的站点”列表中,但是显然您不能强迫用户这样做.
我之前参加过这场战斗,而我能想到的唯一无缝解决方案是将图片上传到服务器,然后为用户提供他们可以操纵的预览.
new File APIs with HTML5将提供您正在寻找的所有功能,但目前尚不全面支持.
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！