Показать имя выбранного файла

Question

Я хочу показать имя файла после того, как пользователь выбрал файл для загрузки.Вот веб-сайт, где мне нужна эта функция: MB @ Consulting - Страница загрузки файла

Я настроил файл CSS и php следующим образом:

<div class="inputfile-box">
    <label for="file">

        <input type="file" id="file" class="inputfile" name="file"  onchange="fileSelected(this);" />

        <span id="file-name" class="file-box"></span>

        <span class="file-button"><i class="fa fa-folder-open"></i>
          Scegli file
        </span>

    </label>

    <label class="custom-file-start-upload">
        <input type="submit" name="submit" onclick="startUploading()" />
        <i class="fa fa-play"></i> Upload
    </label>
</div>

CSSis:

// Hide input old style
input[type="file"] {
    display: none;
}

input[type="submit"] {
    display: none;
}

// Style of label
.custom-file-start-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}    

.file-box, .file-button {
    cursor: pointer;
}

.file-box-send, .file-button-send {
    cursor: pointer;
}

 .custom-file-start-upload {
    background-color: #62ea62;
}

.inputfile-box {
  position: relative;
    width:100%;
    max-width: 360px;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
    min-height: 36px;
}

.file-button {
  background: #d52727;
  padding: 5px;
  position: absolute;
  border: 1px solid #000000;
  top: 0px;
  right: 0px;
  color: #FFFFFF;
}

Я взял код для этой функции с другой страницы ( Пример ) Работаю на демонстрационной странице, но не работаю на моем сайте!Я пытаюсь добавить этот JS:

<script type="text/javascript">
    function fileSelected(target) {
        document.getElementById("file-name").innerHTML = target.files[0].name;
    }
</script>

Но имя файла не отображается в отдельном поле «имя-файла».

Answer 1

Чтобы решить мою проблему, я добавил вторую функцию в поле intput, чтобы она работала как со старой, так и с новой (onchange = "fileSelected () и fileIsSelected (this)).

This:

<input type="file" id="file" class="inputfile" name="file"  onchange="fileSelected(); fileIsSelected(this);" />

и используйте JS:

<script type="text/javascript">
    function fileIsSelected(target) 
    {
        document.getElementById("file-name").innerHTML = target.files[0].name;
    }
</script>

Спасибо:)

Answer 2

Ваш код JavaScript работает, но JavaScript какого-то плагина на вашем сайте неожиданно имеет функцию с тем же именем, которое вы используете в своем событии onchange в своем HTML.Вам нужно изменить имя функции на что-то уникальное.

<input type="file" id="file" class="inputfile" name="file" onchange="fileIsSelected(this);">

Я изменил имя функции на fileIsSelected здесь.Вам также нужно изменить имя в JavaScript.

<script type="text/javascript">
    function fileIsSelected(target) 
    {
        document.getElementById("file-name").innerHTML = target.files[0].name;
    }
</script>