2015-05-21 2 views
0

Так что я недавно «сделал» (беря кусочки от гидов) пользовательскую кнопку для формы входного файла, но также с небольшим текстовым дисплеем справа. Теперь, в хроме, в качестве меры предосторожности, они удалили путь к изображению - что, очевидно, логично. Однако есть возможность удалить эти теги и просто вывести имя файла.входной текст, полоса поддельного пути, вывод во входном тексте

Теперь у меня есть ключ к тому, как это сделать, теоретически, но я понятия не имею, как это сделать НАСТОЯЩИМ. Это, вероятно, легко для парней, которые это знают, но я понятия не имею. Было бы замечательно, если бы вы знали и говорили мне!

Это вскрыши, что я думаю, будет работать

file = path.split('\\').pop(); 

http://i.gyazo.com/ccccb44e7550475acb0cbccf4de20d0e.png

это HTML-

<table style="width:100%; border-collapse: collapse;"> 
    <td style="width: 18%"> 
     <label class="fileUpload"> 
      <input id="uploadBtn" type="file" class="upload" /> 
      <div class="button-speed-menu-browse"> 
       BROWSE.. 
      </div> 
     </label> 
    </td> 
    <td> 
     <input id="uploadFile" class="field-path-input" placeholder="Choose PNG file" disabled/> 
    </td> 
</table> 

Теперь для JavaScript (который находится в нижней части).

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value; 
}; 
+0

так что вы хотели показать только имя файла ?? вместо 'fakename/filename.doc' – Saqueib

+0

@SAQUEIB Это верно –

ответ

0

Вы правы, вы можете получить имя изображения, используя split()

Попробуйте

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value.split("\\").pop(); 
}; 
<table style="width:100%; border-collapse: collapse;"> 
    <td style="width: 18%"> 
    <label class="fileUpload"> 
     <input id="uploadBtn" type="file" class="upload" /> 
     <div class="button-speed-menu-browse"> 
     BROWSE.. 
     </div> 
    </label> 
    </td> 
    <td> 
    <input id="uploadFile" class="field-path-input" placeholder="Choose PNG file" disabled/> 
    </td> 
</table>