关闭搜索(ESC)
搜索标签:

文件按钮的设计

2014-12-14 浏览:791 标签: 上传按钮 js html

写一下自己的做上传按钮的经验。

现在上传按钮一般有两种形式。

1:点击上传
2:拖动上传

这一篇重点讲点击上传。 点击上传我们一般的做法是:

<input type='file' class=''>

然后我们通过

var file = $(".addmarkfile")[0].files[0]; //获取文件对象。
//ajax上传

这是一种典型的上传,但是我们无法修改上传按钮,即使你用CSS修改,但是会出现各种浏览器的兼容性。

方案一:

所以,我们会在按钮上加一个添加按钮的div html代码

<div class="upload">
    <span class="add">+</span>
    <input type="file" class="file">
</div>

css代码

.upload {
    position: relative;
    width: 200px;
    height: 200px;
}
.upload .add {
    display: block,
    width: 200px;
    height: 200px;
}
.upload .file {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    z-index: 0;
}

我们可以通过上面的伪代码,将file按钮隐藏掉。

方案二

这个方案需要用到js。而且比较好用。 html代码

<input type="button" class="add" value="add">
<input type="file" class="file" style="display:none">

js代码

$(".add").click(function(){
    $(".file").click();
});
$(".file").click(function(){
    //js codes
});

这个方案比较简单,你可以更好的自定义你的add按钮样式。我比较建议第二种。

总结

可能上传按钮还有其他的方案,或者这两个还是有问题,后序发现,会更新这个文档的。

添加评论