2016-08-11 8 views
1

В настоящее время я выбираю файл и конвертируюсь в строку base64 и отображая на html странице. Ниже приведен код. Но я хочу так, чтобы при загрузке функции он автоматически извлекал файл из того места, где было сохранено изображение и преобразовывалось в base64 и отображалось. Я просто хочу, чтобы пропустить ручной способ choosing..please помощиСчитыватель файлов Javascript

<html> 
<body> 
Choose File: <input id="imageToLoad" type="file" onchange="displayImage();" /> 
<p>Image encoded</p> 
<textarea id="base64TextArea" style="width:550;height:240" ></textarea> 
<img id="myImg" width="218" height="300" src="" /> 
<script type="text/javascript"> 

function displayImage() 
{ 
    var filesSelected = document.getElementById("imageToLoad").files; 


    if (filesSelected.length > 0) 
    { 
     var fileToLoad = filesSelected[0]; 

     var fileReader = new FileReader(); 

     fileReader.onload = function(fileLoadedEvent) 
     { 



      base64TextArea.innerHTML = fileLoadedEvent.target.result; 
      document.getElementById("myImg").src = fileLoadedEvent.target.result; 
     }; 

     fileReader.readAsDataURL(fileToLoad); 
    } 
} 

</script> 

</body> 
</html> 

ответ

2

Вы не можете получить произвольные файлы на компьютере клиента с JS. Используя большинство браузеров, клиент должен вручную выбрать файл для обработки скриптом.

Если вы думаете об этом, это будет серьезным недостатком безопасности, если любой веб-сайт сможет получить доступ к любому файлу на вашем компьютере.

+0

Кроме того, это кошмар XSS – MrBizle

+0

Да, если браузеру разрешен произвольный доступ к ресурсам файловой системы, то есть сильная проблема безопасности !!! –

+0

... и это не то, что делает скрипт? У них есть '' и onchange. Это очень возможно в HTML5. – Katana314

-1

Я не уверен, почему Base64 является важным аспектом здесь. Пожалуйста, дайте некоторые детали, если преобразовать изображение в текст является специфическим требованием ваших потребностей, но если вы хотите, чтобы отобразить и ссылаться на изображение, вы можете начать с этого:

if (filesSelected.length > 0) 
    { 
     var fileToLoad = filesSelected[0]; 

     document.getElementById("myImg").src = URL.createObjectURL(fileToLoad); 
    } 

Это будет использовать «объект URL ", который является сокращенным способом обращения к файлу, который был перетаскиван/удален, или выбран из <input>

+0

У меня есть html-отчет, создаваемый в моем приложении во время выполнения некоторых тестов, а также некоторые снимки экрана будут сделаны во время тестов. Я просто хочу загрузить только этот html-файл на удаленный сервер со встроенным init. – jayesh

+0

@jayesh Вы хотите загрузить файл HTML? Где эта загрузка происходит? Гораздо более гладким способом было бы встроить данные изображения непосредственно в этот HTML с использованием URL-адреса данных или разместить его в месте размещения рядом с HTML. Это похоже на то, как делаются ваши отчеты, очень актуально для этой проблемы. – Katana314

+0

yes Я хочу загрузить только html-файл, а не файлы изображений, изображения, которые я могу встроить в html-страницу. Эти изображения находятся в определенном месте в моем приложении, как я могу получить файлы изображений в jS-методах, чтобы я мог конвертировать в bse64 string и embed – jayesh