Question

这是方案..

我有一个文件上传按钮，用于通过ajax上传图像并在浏览器中预览图像。它还会在上传时显示加载栏。

现在，我已经使用jQuery为文件按钮添加了一些样式。

当用户选择图像时，它会上传到服务器，然后显示图像预览。

现在，这适用于所有浏览器（Chrome，firefox，safari，opera甚至maxthon）。除了Internet Explorer（10,9,8 ......全部！）

在IE中，当我点击自定义上传按钮时，它会打开上传文件的窗口，现在当我选择图像时，它会一直显示加载栏并且没有任何反应。

但具有讽刺意味的是，当我从文件上传按钮中删除自定义时，它会轻松上传图像并显示预览。

我用来设置文件按钮样式的jQuery代码是：

$('#up_btn').on('click', function () {
   $('#photoimg').trigger('click');
});

//Here, up_btn is the ids of the div which I am using as file
button which triggers the file button #photoimg.

我正在使用ajaxForm来实现ajax上传和预览。

在提出问题之前，我已经尝试了几乎所有技巧来自定义文件上传按钮，但问题仍然存在，即自定义文件按钮后，上传永远不会发生。

以下代码是执行上传到服务器的代码：

 $('#photoimg').live('change', function(){ 
       $("#preview").html('');
       $("#preview").html('<img class="loader_img" src="../images/loader.gif" alt="Uploading...."/>');
       $('#up_btn').hide();
   $("#imageform").ajaxForm({
            target: '#preview'
        }).submit();
   $('#preview').show();
   });
// Here, #photoimg is the id of file upload button, #preview is the div in which the
   preview is being shown, and #up_btn is the customized button for file button.

我也尝试过hit和try方法，发现IE无法触发ajaxForm。

我知道ajaxForm和IE之间存在一些问题，但在使用简单文件按钮时工作正常。

Answer 1

IE不允许像您一样执行文件上传控制触发操作。而不是你可以像下面那样。设置文件上传控件不透明度为0.

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;  height: 24px;overflow:hidden;">
<img src="/images/attach.jpg" alt="" title="Add Attachment" style="height:24px;width:16px; position: relative;top: 1px; left: 0px;"/>
<input type="file" id="fileupload" name="upload" onchange="getFileName();" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -22px; left: -1px" />
</div>

如需进一步参考，请参阅此内容。 In JavaScript can I make a "click" event fire programmatically for a file input element?

演示： http://jsfiddle.net/k6zBQ/2/

样式化后，文件按钮不会通过ajaxForm上传图像

1 个答案: