input type file arkaplanını değiştirmek

Doğru Cevap

• 1
  

  10 yıl önce yazılmış

  seyfside

  35 cevap - 0 soru
  http://www.quirksmode.org/dom/inputfile.html

Cevaplar

• 

  10 yıl önce yazılmış

  10 yıl önce güncellenmiş

  siyahbeyaz

  472 cevap - 20 soru
  elinde 160px * 30px bir input resmi oldugunu varsayarsak..
  input.jpg olsun ismi.
  

  .resiminput {
  width:150px; // padding icin 5px sag ve sol icin  pay biraktim. 
  height:30px;
  padding:0px 5px;
  background:url(input.jpg) no-repeat;
  line-height:30px;
  border:0px;
  
  }
  

  
  
  
  

  <input name="ahmet" type="text" class="resiminput" /><br />
  <input name="veysel" type="text" class="resiminput" /><br />
  

  • erxomiger
    İnput type text için bu dediğin doğru ama file için olmaz bu resmin üzerinde birde gri bir buton çıkar bu yüzden javascript kullanmak gerekiyor. Şöyle birşey buldum
    
    Önce js kodlarını vereyim
    
    

    function setPath(f) {
    document.getElementById('mypath').value = f;
    }
    function browse() {
    document.getElementById('realFile').click()
    }
    function clearIt(f) {
    f.value='';
    var d = document.getElementById('browser');
    var olddiv = document.getElementById('realFile');
    var new_element = document.createElement( 'input' );
    new_element.type = 'file';
    new_element.id='RealFile';
    new_element.onchange = function() {document.getElementById('mypath').value = document.getElementById('realFile').value;};
    d.replaceChild( new_element,olddiv );
    }
    

    
    
    Burasıda xtml kodları
    
    

    <a href="#" onclick="browse()"><img src="images/input-resim.jpg" border=0></a></td><td width="176"><p>Resim Seçiniz</p></td></tr></table>
    
    <div id="browser" style="display: none">
    <input type="file" id="realFile" onchange="setPath(this.value)">
    </div>
    

    
    
    
    Burdaki javascirpt kodu a tagını inputa çeviriyor genede yardımınız için teşekür ederim :)
    10 yıl önce yazılmış
  • siyahbeyaz
    cok ozur dilerim soruyu tam okuyamamışım. böyle bir calısma yapmıstım daha once ama bazı tarayıcalarda aynı sekılde ben sıkıntılar cektım nıhayetınde sorunu asmıstım..
    
    burda yaptıgım projede kodlar mevcut. kaynak kodundan alabilirsiniz..
    
    http://www.datatime.com.tr/insan-kaynaklari.html
    10 yıl önce yazılmış