5

アップロードする前に写真をプレビューする次のスクリプトに関して、次の質問と回答が必要です。スクリプトはhttp://jsbin.com/uboqu3/edit#javascript,htmlからのものです

1）スクリプトはFirefoxで機能しますが、IEでは機能しません。IEで動作させる方法は？

2）写真を削除する方法はありません。プレビュー写真に小さな画像「X」のようなものをインストールする必要があります。この「X」をクリックすると写真が削除されます。誰かがこのソリューションを提供できますか？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>
4

6 に答える 6

6

デモ

いくつかのブラウザー、Chrome、Fx、Safari 6 でテスト済み (誰か 5 をテストできますか?)

設定を変更せずに XP 上の IE8 で動作しますが、@Gunasekaran がこのページの後半で言及しているように、必要になる場合があります。

[ツール] -> [インターネット オプション] -> [セキュリティ] タブ -> [カスタム レベル] を開き、[ファイルをサーバーにアップロードするときにローカル ディレクトリ パスを含める] の設定を見つけて、[有効にする] をクリックします。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>

XP の IE8 では次のようになります。

例

新しいメソッドは、私が実装していないcreateObjectURL です

更新ユーザーが同じ画像を 2 回選択できるようにする場合は、onclick を追加してファイル入力をクリアする必要があります (onchange はトリガーされません)。

同じファイルを選択しても HTML 入力ファイル選択イベントが発生しない

于 2012-04-18T09:44:23.090 に答える
2

これは、Internet Explorer 10 未満のものでは機能しFileReader()ません ... サポートは IE10 まで導入されません .. Chrome 7 および Firefox 3.6 で機能します

FileReaderまたはcaniuse.comのサポートについては、こちらのドキュメントを参照してください。

于 2012-04-18T09:36:22.400 に答える
1

@ user1315468 の最後の応答への返信で、IE8 にはセキュリティ設定の変更が必要です。

[ツール] -> [インターネット オプション] -> [セキュリティ] タブ -> [カスタム レベル] を開き、[ファイルをサーバーにアップロードするときにローカル ディレクトリ パスを含める] 設定を見つけて、[有効にする] をクリックします。

この変更後、mplungjan のデモ リンクを使用してブラウザーを再度開くことができます。お役に立てれば。

于 2012-07-05T07:19:58.750 に答える
0

**すべてのブラウザの完全な動作コードを貼り付けました..

注: Internet Explorer がスクリプトをブロックする場合があるため、画像を表示するには、プロンプトをクリックして [ブロックされたコンテンツを許可する] をクリックします。以下は動作するコードです...**

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

</head>

<body>
<form name="form2">

<div>
<input type="file"  name="myFile"   id="myFile" onchange="readURL(this);"></input>
</div>

<div>
<img id="previewImg" src="#" />
</div>

</form>
<script>

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#previewImg')
            .attr('src', e.target.result)
            .width(130);
    }
reader.readAsDataURL(input.files[0]);

}else{
          var filename = "";
         filename = "file:\/\/"+input.value;
         document.form2.previewImg.src=filename;
         document.form2.previewImg.style.width="130px";

 }
}
 </script>   
</body>
</html>
于 2013-03-06T12:40:20.400 に答える