IE7 / 8不显示fineuploader按钮
[英]fineuploader button doesn't show for IE7/8
问题描述
Working with a JavaScript plugin called fineloader to upload files. 
使用名为fineloader的JavaScript插件上传文件。 My code is below and a live demo is located here . 我的代码如下， 现场演示位于此处 。 For some reason, the button and input doesn't show using IE7 and my laptop using IE8, but does show using my virtual machine and IE8 as well as IE9/FF/etc. 由于某种原因，按钮和输入不显示使用IE7和我的笔记本电脑使用IE8，但显示使用我的虚拟机和IE8以及IE9 / FF /等。 Any help to make it visible would be very appreciated. 任何使其可见的帮助将非常感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader - Basic</title>
</head>
<style>
#upload-block {width: 280px;}
button.gray {
border:1px solid black;
color: black;
height: 25px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.1.js"></script>
<script>
$(document).ready(function() {
var uploader = new qq.FineUploaderBasic({button: document.getElementById('uploader')});
});
</script>
<body>
<div>
<label>FILE:</label>
<div id="upload-block">
<div id="uploader">
<input type="text" readonly id="myFilename">
<button class="gray">BROWSE</button>
</div>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 2012-12-20 03:49:02
Your upload button is a bit odd. 你的上传按钮有点奇怪。 Why are providing a div that already has a text input along with a button element as children? 为什么提供一个已经有文本输入的div和一个按钮元素作为子元素？ Did you know fine uploader also adds a file input element as a child of your button (in this case, #uploader)? 您是否知道上传器还添加了一个文件输入元素作为按钮的子节点（在本例中为#uploader）？
I'd recommend you move the text input elsewhere, though I can't say for sure it's causing a problem for you as all looks well to me. 我建议你把文字输入移到其他地方，虽然我不能肯定地说这对你造成了问题，因为我看起来都很好。 Although, I don't have a real copy of IE8 (I'm using compatibility mode, like other posters here). 虽然，我没有IE8的真实副本（我使用的是兼容模式，就像这里的其他海报一样）。
I would recommend your upload button option element be modified to look like this instead: 我建议您将上传按钮选项元素修改为如下所示：
<div id="uploader">
<div>BROWSE</div>
</div>
And put your text input somewhere else, perhaps as a sibling of #uploader. 并将您的文本输入放在其他地方，也许作为#uploader的兄弟。
Also, don't use a button element at all for your uploader "button". 此外，不要使用按钮元素作为上传器“按钮”。 An issue with event delegation in IE will prevent the input child (added by Fine Uploader) from receiving the click event. IE中事件委派的问题将阻止输入子节点（由Fine Uploader添加）接收单击事件。
解决方案2
1 2013-03-19 16:56:28
I'm using fineuploader 3.3, but I believe it's the same problem. 我正在使用fineuploader 3.3，但我相信这是同样的问题。 Actually, it has nothing to do with your code, but a small bug in a fineuploader code - button is there, it's just not visible :), it can be clicked (below "File" label) 实际上，它与你的代码无关，但是一个精细上传代码中的一个小错误 - 按钮就在那里，它只是不可见:)，它可以被点击（在“文件”标签下面）
Locate file util.js and lines 找到文件util.js和行
/**
* Sets styles for an element.
* Fixes opacity in IE6-8.
*/
css: function(styles) {
if (styles.opacity !== null){
if (typeof element.style.opacity !== 'string' && typeof(element.filters) !== 'undefined'){
and change to 并改为
/**
* Sets styles for an element.
* Fixes opacity in IE6-8.
*/
css: function(styles) {
if ((styles.opacity !== null) && (typeof styles.opacity !== 'undefined')) {
if (typeof element.style.opacity !== 'string' && typeof(element.filters) !== 'undefined'){
(only first IF is change, rest of code is here to find it easier) （只有第一个IF是更改，其余的代码在这里更容易找到）
In your fineuploader-3.1.js, it's a bit harder to find, it's somewhere in the beggining of the file, just carefully change IF code. 在你的fineuploader-3.1.js中，它有点难以找到，它位于文件开始的某个地方，只需仔细更改IF代码即可。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.