0

次の html と js を使用して、サーバーにファイルをアップロードしたいと考えています。

<script type="text/javascript">
    $(function() {
        $('#uploadimageBtn').click(function() {
                $('#imageInput').click();
        });

        $('#imageInput').change(function(event) {
                $('#loading-spinner').show();
                var file = $(this).val();
                var fileName = file.split("\\");
                $('#uploadimageBtn-inner').html("Uploading..."); 
                $('#uploadForm').submit();
                event.preventDefault();
        });                
    });
</script>

<div id="uploadimageBtn">
    <g:img id="loading-spinner" style="display:none;" file="loading.gif"/>
    <div id="uploadimageBtn-inner">Click to upload a file</div>
</div>  

<g:form name="uploadForm" action="update" method="post" enctype="multipart/form-data">
    <div style="height: 0px;width: 0px; overflow:hidden;">
        <input id="imageInput" name="image" type="file" value="upload"/>
    </div>
</g:form>

すべての主要なブラウザーで完全に機能しますが、IE では機能しませんでした。

では、それを機能させるには何を変更する必要がありますか?

4

1 に答える 1

4

Internet Explorer には、ファイル入力に関するセキュリティがあります。ファイル入力でクリックをトリガーすることはできません。そして、ファイル入力でいくつかのイベントを聞くことができないと思います。

そのようなことをしたい場合は、目に見えないファイル入力で「トリック」を使用する必要があります。img の上に非表示のファイル入力を配置し、ユーザーが img をクリックすると、実際には入力ファイルをクリックします。ただし、IE ではファイル入力を複製することはできないため、この入力を DOM から切り離し、フォームに入れてから送信する必要があります。

確認できます：http: //fineuploader.com/ あなたがやりたいことができると思います。

于 2012-12-03T08:48:57.157 に答える