Форум

petrovich · #1 (**permalink**) 24.07.2015, 14:16

надо по клику начав процесс якобы "загрузки файла на сервер" получить имя и может быть даже путь выбранного файла для использования этого имени в дальнейшем в программе - например для фоновой картинки элемента

это возможно?

laimas · #2 (**permalink**) 24.07.2015, 14:59

Имя пожалуйста, а вот путь браузеры "не выдают".

ravend · #3 (**permalink**) 24.07.2015, 17:40

возможно
посмотри e.target.files возвращаемый input[file] на событии change
а потом преобразуй его в урл, примерно так:

var URL = window.webkitURL || window.URL;
var url = URL.createObjectURL(e.target.files[0])

естественно это будет ссылка на локальный файл, после загрузки подменишь его ссылкой на сервер

petrovich · #4 (**permalink**) 26.07.2015, 13:17

решение найдено:

<input id="выбор_файла" type="file" accept="image/*" onchange="функция1(this.files)">

#выбор_файла {display:none;}

var функция1=function(files)
{
var file = files[0];
alert(file.name); //имя файла
alert(file.size); //размер файла
}

кнопка_загрузки.onclick = function()
{
выбор_файла.click(); //имитация нажатия скрытой кнопки "выбор_файла"
}

petrovich · #5 (**permalink**) 26.07.2015, 13:18

- недостаток метода в том что надо создавать инпут который приходится скрывать

вопрос - как без инпута сделать то же самое

petrovich · #6 (**permalink**) 26.07.2015, 17:01

однако опять засада - не могу получить имя файла и вписать его в красную кнопку:

<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>


<style type="text/css" id="">


#файл_картинки {
	display:flex;
	width: 74px;
	height: 44px;
	border: 2px solid red;
}


</style>
<script type="text/javascript"> "use strict";

var получение_имени_картинки = function(files)
               	{
                  var file = files[0];
                  имя_файла_картинки = file.name;      
                };

var выбор_файла = function()
                {  
                   выбор_файла_картинки.click();
                   файл_картинки.textContent = имя_файла_картинки;
                };


var имя_файла_картинки;


</script> 
</head>
<body>

<span id='файл_картинки' class='кнопка_css'onclick='выбор_файла()'></span>

<input id="выбор_файла_картинки" class='скрытый' type="file" accept="image/*" onchange="получение_имени_картинки(this.files)">
       

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript