4

偽のボタンを使用した隠しファイルの入力と、ブラウザの表示の一貫性のための入力があります。現在、元の入力も表示されており、それを使用してファイルをアップロードすると、すべて正常に動作することがわかりました。

ただし、「ダミーファイル」のボタンを使用して、JavaScript を介してクリックをトリガーすると、UI と同様に期待どおりに値が読み込まれます。しかし、今回送信をクリックすると、代わりに入力から値がクリアされ、他に何もしません。これは IE でのみ発生し、chrome では発生しません。これは、以前に質問した質問の問題の原因です: https://stackoverflow.com/questions/19275901/internet-explorer-specific-form-post-with-file-input-returning-empty-file-list。これは、その範囲を超えて関連するため、別の質問として質問します。

HTML (これは部分的なビューなので、さらに入力を追加してファイル コレクションを返すことができます。メイン ビューに引き出して、これと別のバグのために 0 をハードコーディングしました)。

<div class="control-group">
   <label class="control-label" for='@String.Format("file{0}", 0)'>File</label>
   <div class="controls">
         <input type="file" name="files" class="hiddenFileInput" id='@String.Format("file{0}", 0)' />
         <div class="dummyfile">
              <input id="@String.Format("filename{0}", 0)" type="text" class="input disabled" name="filename" >
              <button type="button" class="btn btn-primary">Choose</button>
         </div>
    </div>
</div>

jQuery:

function fileUploadControlInit() {

        $('.dummyfile .btn').unbind("click").on("click", function (e) {
            $(this).closest("div").siblings(" :file").trigger('click');
        });

        $('.hiddenFileInput').on("change", function (e) {
            var val = $(this).val();
            var file = val.split(/[\\/]/);
            var fileName = file[file.length - 1];
            $(this).siblings("div").children(" :text").val(fileName);


            $("#UploadFile").prop('disabled', false);

        });
    }
4

1 に答える 1

2

これは Internet Explorer に組み込まれているセキュリティ制限です (私は v6.0 から v10 までをテストしました)。はい、プログラムで参照ボタンをクリックすることはできますが、フォームを送信するとボックスがクリアされます。基本的には、ユーザーがだまされるのを防ぐためです。ファイルのアップロードに。

したがって、オプションはスタイリングに別のアプローチを取ることです。この例では、基本的に、元のボタンを適切にスタイル設定されたボタンの上に不透明にします (Andrew の功績はこちら):

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    input[type=file] {
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
}

.button-container {
    position: relative;
}

.fake-button {
    border: 3px inset #933;
    pointer-events:none;
    z-index: -100;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

});//]]>  

</script>


</head>
<body>
  <form method="post" enctype="multipart/form-data" action="http://google.com/">
    <div class="button-container">
        <span class="fake-button">fake button</span>
        <input type="file" name="file" id="id_file" />
    </div>
    <input type="submit" />
</form>

</body>

</html>

他の投稿でも言及されていますが、ここにはファイルアップロードボックスのさまざまなブラウザースタイルの良い記事があります: http://www.quirksmode.org/dom/inputfile.html

于 2014-01-31T11:48:18.067 に答える