如何在IE中上传文件?

时间:2012-12-03 08:46:02

标签: javascript internet-explorer grails file-upload grails-2.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中它不起作用。

那么我需要做些什么才能让它发挥作用?

1 个答案:

答案 0 :(得分:4)

Internet Explorer对文件输入有一些安全性。您无法触发文件输入的单击。而且我认为你不能在文件输入上听一些事件。

如果你想做这样的事情,你必须使用带有不可见文件输入的“技巧”。你把一个不可见的文件输入放在一个img上,当用户点击img时,他实际上点击了输入文件。但是你不能克隆IE上的文件输入,所以你必须从DOM中分离这个输入,把它放在一个表单中,然后提交它。

您可以查看:http://fineuploader.com/ 我认为它可以做你想做的事。