OnChange ввода с Javascript

У меня есть этот код:OnChange ввода с Javascript

<input type="file" onchange="showUrl(this.value)" name="upload[]" multiple="multiple"> 
    <button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span> 
    <input type="submit" class="btn btn-primary" value="Upload"><br><br><span id="url"></span>

и это Java-функция

function showUrl(url) { 
    document.getElementById("url").innerHTML = url; 
}

Я хочу, чтобы показать URL каждого файла, который пользователь выбирает с помощью кнопки «входного файла». Функция показывает только URL-адрес первого файла. Кто-то может мне помочь? Thanks

источник

2015-08-25 hteo

@teemu я пишу php в заголовке, потому что я использую php с js :) – hteo

Javascript

<script type="text/javascript"> 
function showUrl() { 
    var allFiles = document.getElementById("myFiles"); 

    if ('files' in allFiles) { 
     if (allFiles.files.length > 0) { 
      for (var i = 0; i < allFiles.files.length; i++) { 
       document.getElementById("url").innerHTML += "<br />"+allFiles.files[i].name; 
// note you can mess with proprieties here, like 'size' 
      } 
     } 
    } 
} 
</script>

HTML

<body> 
    <input type="file" onchange="showUrl()" name="upload[]" id="myFiles" multiple="multiple"> 
    <button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span> 
    <input type="submit" class="btn btn-primary" value="Upload"> 
    <br /><br /> 
    <span id="url"></span> 
</body>

источник

2015-08-25 19:13:24 lockedz

Нет, это не работает – hteo

@hteo это не работает или не соответствует вашим потребностям? Я отредактирую с результатом, который я получаю (который работает!) – lockedz

Я также использую Chrome, но код показывает только один путь ... Я действительно не понимаю – hteo

Я не уверен, что вы после. попробуйте:

function showUrl(url) { 
    document.getElementById("url").innerHTML += url; 
}

источник

2015-08-25 18:59:32 Fergoso

Нет, он не работает – hteo

Во-первых, изменить свой вклад:

<input type="file" onchange="showUrl(this)" name="upload[]" multiple="multiple">

Затем измените JS на:

function showUrl(url) { 
    for(var i = 0; i < url.files.length; i++) { 
    document.getElementById("url").innerHTML += url.files[i].name; 
    } 
}

Таким образом, вы будете иметь возможность читать все выбранные файлы на входе файлов.

источник

2015-08-25 19:04:07 Marcovecchio

Нет, если я пишу функцию showUrl (url) { для (var i = 0; i hteo

@hteo: Я отредактировал свой ответ, чтобы лучше подойти к вашему вопросу. – Marcovecchio

Я не думаю, что вы можете получить полный путь, но вы можете получить имя файла, передав this.files вместо this.value

function showUrl(url) { 
    for(var i = 0; i < url.length; i++) 
    { 
     document.getElementById("url").innerHTML += url[i].name + "<br>"; 
    } 
}

источник

2015-08-25 19:11:59 Jez

С вашим методом результат (почти правильный): [object File] [object File] – hteo

Извините, забыли получить доступ к свойству 'name' в' url [i] '. Должно быть сейчас. – Jez

OnChange ввода с Javascript

ответ

Смежные вопросы