2012-03-03 15 views
3

私はいくつかのJavaScriptコードを書いています。ローカルで実行しているときに機能しますが、IISでホストされている場合は機能しません。また、一部のブラウザでも動作しません。あなたはJavascriptを介してクライアントマシンから画像をロードしようとしている。base64 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上で機能していない、plzは

+2

「機能していない」とはどういう意味ですか?何かエラーがありますか? – gideon

+0

アラート(base64)は、ローカルのbase64コード全体を表示しますが、iis上ではデータ ''しか表示されません。イメージをbase64文字列に変換しません。 –

+0

私たちの目的は、html、javascriptのみを使用してサーバーにファイルをアップロードすることです –

答えて

3

あなたの問題はこれで助けます。 <input type="file" />から値を取得し、すぐに表示しようとします。これはデフォルトのIE設定でlocalhost上でのみ行うことができます。 Javascriptはインターネットシナリオでは制限されています。クライアント・スクリプトがファイル・システムにアクセスして、知らないうちにサーバーに物事を投稿することは望ましくありません。

実際、f()の行alert(p);は、IISから提供されるのではなく、マシンで実行されているときに別の値を表示する必要があります。 IISからは、完全なパス、ファイル名のみを表示すべきではありません。これを回避するには?最も簡単な方法は、インターネットオプションの「信頼済みサイト」リストにサイトを追加することですが、ユーザーにこれを強制することはできません。

私は前にこの戦いを戦ってきた、と私が思い付くことができた唯一のシームレスなソリューションを、サーバとに画像をアップロードするユーザーは、彼らが操作できるというのプレビューを与えることでした。

new File APIs with HTML5は、探しているすべての機能を提供しますが、この時点でサポートは全面的ではありません。