6

私はファイル入力を次のように定型化しました：

<html>
<head>
<style>
#yourBtn{
 position: relative;
 top: 150px;
 font-family: calibri;
 width: 150px;
 padding: 10px;
 border-radius: 5px;
 border: 1px dashed #ddeeff; 
 text-align: center;
 background-color: #ffddee;
 cursor:pointer;
 color:#333333;
}
</style>
<script type="text/javascript">
 function getFile(){
document.getElementById("upfile").click();
 }
 function sub(obj){
 document.getElementById("yourBtn").innerHTML = "Uploading Please Wait...";
 document.myForm.submit();
 event.preventDefault();
 }
</script>
</head>
<body>
<center>
<form action="/sub/upload.php" method="POST" enctype="multipart/form-data" name="myForm" target="myiframe">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" name="upload" style="display:none;" onchange="sub(this)" /></div>
</form>
<iframe name="myiframe" style="width:100;height:100;border:2px solid #bbccdd;"></iframe>
</center>
</body>
</html>

問題は、.submit（）関数がIEで「アクセス拒否」エラーを返すことです（IE8および9でテスト済み）。他のすべてのブラウザ（chrome、opera、safari、Firefox）で正常に動作します。sub（obj）が呼び出されたとき。また、Jqueryを使用しても同じことが起こります。

では、このスクリプトをIEで動作させる方法を教えてもらえますか？

4

2 に答える 2

5

上記のように、IEでは、ダイアログを開いて、ユーザーに代わってjavascriptを介してファイルを送信することはできません。そうは言っても、「ファイル入力」のスタイルを設定するというあなたの考えは完全に有効です。

このリンクはそれを助けるかもしれません：

ファイル入力のスタイリング

控えめに言ってもバグのある回避策ですが、一般的な要点は次のとおりです。

  1. ファイル入力を作成し、cssを使用して不透明度を0.0に設定します。入力が無効になるため、可視性を設定しないでください。
  2. CSSを使用して、通常のテキスト入力を好みに合わせてスタイル設定し、目的のファイル入力のように見せます。
  3. テキスト入力を配置し、0のz-indexを追加します。
  4. ファイル入力（完全に透過的）を配置し、z-indexを1にします。

  5. ファイル入力の値をプルするJavaScriptを記述します（つまり、jQueryで

    $('input[type="file"]').val();

    そしてそれをテキスト入力に配置します。

ここでの考え方は、ファイル入力がまだファイルをプルしていて、ユーザーがまだファイルを選択しているということです。ある意味では、それをマスクして、カスタムコントロールがあるかのように見せることができます。本当に、あなたの偽のコントロールは、単に透明な本物のコントロールの後ろにあります。

お役に立てれば

于 2013-01-28T15:14:54.920 に答える
0

これは決して機能しません。IEでは、javascriptを介して「ファイルの選択」ダイアログを呼び出し、javascriptを介して関連するフォームを送信することはできません。これまで見てきたように、これを試みると、IEはフォームの送信時にエラーをスローします。ユーザーが自分で入力要素をクリックできるようにする必要があります。

于 2013-01-28T14:47:01.167 に答える