【问题标题】:Custom File Upload Script does not work in safari自定义文件上传脚本在 safari 中不起作用
【发布时间】:2012-01-09 19:28:27
【问题描述】:

所以我有一个自定义上传脚本,它基本上允许用户/客户端单击并选择他们想要上传的图像或单击并将其拖动到框中,当他们这样做时会出现预览。该代码似乎在 firefox 和 chrome 中都可以正常工作,但在 safari 中却不行。我知道我的客户主要使用 safari,我想让它为他们工作。

为什么它在 safari 中不起作用?

HTML -

<form method='post' enctype='multipart/form-data' action='#'>
<div style="height: 200px;">
<div class="droparea spot logoupload">
<div class="instructions"><img class="previewlogo" src="http://wmemusic.com/wme/admin/img/loginlogo.jpg" alt="Click or Drag image here to add login logo"/>
</div>
<input type="file" class="droparea spot logoupload" name="logo" onchange="readURL(this);"/>
</div>
</div>
</form>

CSS -

.droparea {
                position:relative;
                text-align: center;
                min-height:100px;
                margin:0;
            }

            .droparea div, .droparea input {
                position: absolute;
                top:0;
                right:2px;
                width: 100%;
                height: 100%;
            }
            .droparea input {
                cursor: pointer; 
                opacity: 0; 
            }
            .droparea .instructions {
                border: 2px dashed #ddd;
                max-height:200px;
                height:auto;
                min-height:100px;
                overflow:hidden
            }
            .droparea .instructions.over {
                border: 2px dashed #000;
                background: #ffa;
            }


            #areas { width: 480px; }
            div.spot {

                margin: 5px auto;

            }
          .logoupload {width: 262px;
                min-height: 100px;
                height:auto;}

JAVASCRIPT -

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    var imgHeight = $(".previewlogo").height();

    reader.onload = function(e) {
        $('.previewlogo').attr('src', e.target.result)
        $('.droparea').attr('style', 'height:', imgHeight, 'px;')
    };

    reader.readAsDataURL(input.files[0]);
}
}

【问题讨论】:

    标签: javascript html css file-upload input


    【解决方案1】:

    Safari 尚不支持 FileReader:http://caniuse.com/#search=filereader

    编辑:Safari 6.0+(iOS 和桌面)现在支持它

    【讨论】:

    • 嗯,这可以解释它...有没有替代它??
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多