如何创建只有HTML，JS和CSS的自定义文件上传？ [英] How Can I Create a Custom File Upload With Only HTML, JS and CSS

问题描述

以下是我想要创建的控件的设计：

正如您所看到的，创建设计除了上传控件的浏览按钮外很容易。我创建了其余的。我一直在寻找改变浏览按钮的位置，但找不到有用的东西。

那么，该怎么做？有一个想法，像嵌入一个不可见的上传控制按钮，但任何其他的建议是金，谢谢。

其实不是你可能会觉得很复杂。查看这个小提琴。设计您的按钮的样式！

HTML

 < input type =fileid =uploadme/> 
< input type =buttonid =clickmevalue =上传东西！ /> 
  

CSS

  input [type = file] {
 width：1px; 
可见性：隐藏; 
} 
  

JavaScript

  $（function（）{
 $（'＃clickme'）。click（function（）{
 $（'＃uploadme' ）.click（）; 
}）; 
}）; 
  

Here is the design of the control I want to create:

As you can see, it's easy to create the design except the browse button of upload control. I created the rest. I've been searching about changing the place of Browse button but could not find anything useful.

So, how to do that? There was an idea like embedding an unvisible upload control over button but any other advice is golden, thanks.

解决方案

It's actually not as complicated as you may think. Check out this fiddle. Stylize your button how you will!

HTML

<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />

CSS

input[type=file] { 
    width: 1px; 
    visibility: hidden;
}

JavaScript

$(function(){
    $('#clickme').click(function(){
        $('#uploadme').click();
    });
});

这篇关于如何创建只有HTML，JS和CSS的自定义文件上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！