Stil input type=&; dosya" düğme"

SORU

21 ŞUBAT 2009, CUMARTESİ

Stil input type=&; dosya" düğme"

Nasıl type="file" düğmesi giriş tarzı.

CEVAP

3 Mart 2012, CUMARTESİ

aşağıdaki adımları takip dosya upload form için özel stiller oluşturabilirsiniz:

1.) bu basit bir html Formu(lütfen aşağıda yazdım oku)

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
    <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
    <!-- this is your file input tag, so i hide it!-->
    <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
    <input type="submit" value='submit' >
    </form>

2.) sonra giriş etiket dosyası için tıklayın olay geçmek için bu basit bir komut dosyası.

    function getFile(){
        document.getElementById("upfile").click();
    }

şimdi varsayılan stillerini değiştirmek için nasıl önemsemeden bir stil herhangi bir türü kullanabilirsiniz. bir buçuk ay için varsayılan stillerini değiştirmek için çalışıyorum çünkü bunu çok iyi biliyorum. ben farklı tarayıcılarda giriş etiketi upload farklı çünkü çok zor inan. Bu kullanım özel oluşturmak için bir dosya upload form.Burada tam OTOMATİK UPLOAD kodu.

<html>
<head>
<style>
#yourBtn{
   position: relative;
       top: 150px;
   font-family: calibri;
   width: 150px;
   padding: 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #DDD;
   cursor:pointer;
  }
</style>
<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>
</head>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>

tadını çıkarın!

İyi günler

Bunu Paylaş: