Php 设置图像样式后，“文件”按钮不会通过ajaxForm上载图像

下面是一个场景

我有一个文件上传按钮，用于通过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.

我用它来实现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.

我还尝试了点击并尝试的方法，发现IE无法触发ajaxForm

---

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

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>

如需进一步参考，请参阅此

---

演示：

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>

如需进一步参考，请参阅此

---

演示：

谢谢@RGS，它成功了。我跟踪了您提供的链接，了解了确切的问题所在。我还实现了你的代码。这是一个有点丑陋的黑客，但值得一试。谢谢你。谢谢@RGS，它成功了。我跟踪了您提供的链接，了解了确切的问题所在。我还实现了你的代码…这是一个有点丑陋的黑客，但值得…谢谢你的人。。