自定义文件按钮以进行图像上传 [英] customize the file button for image upload

问题描述

我放置了一个按钮来上传图片文件。我想自定义该按钮，我想添加多个图片文件，什么是逻辑到achive。

 < input type =file/>，这将渲染一个选择按钮，文本在同一行中显示为无文件选择。 
  

可以自定义文本没有文件选择 c> 下面选择 button.Meanwile我明智地保持在没有文件选择文本之前的相机图像。

如何执行此操作以改善我的网站。

感谢

height：0px 和 overwflow：hidden 。您可以添加一个按钮或其他html元素，您可以根据自己的需要设置样式。在onclick事件中，使用javascript或jQuery获取输入字段，然后单击：

 < div style =height：0px ; overflow：hidden> 
< input type =fileid =fileInputname =fileInput/> 
< / div> 
< button type =buttononclick =chooseFile（）;>选择文件< / button> 
 
< script> 
 function chooseFile（）{
 $（＃fileInput）。 
} 
< / script> 
  

现在输入已隐藏，但您可以根据需要设置按钮样式，

如果您不想使用jQuery，请使用此脚本标记替换脚本标记：

 < script> 
 function chooseFile（）{
 document.getElementById（fileInput）。click（）; 
} 
< / script> 
  

I am placed a button for upload image files.I want to customize that button, i want to add more than one image file ,what is the logic to achive.

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

Is it possible to customize the text "no files choosen"below the choose button.Meanwile i wise to keep an camera image before the no files choosen text.

How to perform this to improve my site.

Thanks

解决方案

You can hide the input by placing it into a div which is height:0px and overwflow:hidden. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:

<div style="height:0px;overflow:hidden">
   <input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>

<script>
   function chooseFile() {
      $("#fileInput").click();
   }
</script>

Now the input is hidden, but you can style the button as you want, it will always open the file input on click.

If you don't want to use jQuery replace the script tag with this script tag:

<script>
   function chooseFile() {
      document.getElementById("fileInput").click();
   }
</script>

这篇关于自定义文件按钮以进行图像上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！