Как хранить данныеURL вне функции reader.onload

Question

, поэтому я хочу хранить данныеURL файла вне функции reader.onload , но когда я назначаю его переменной hello и пытаюсь ее распечатать, он все равно не распознает undefined.

здесь код

<input type='file' accept='image/*' onchange='openFile(event)'><br> 
<img id='output'> 
<script> 
    var openFile = function(event) { 
    var input = event.target; 

    var reader = new FileReader(); 
    reader.onload = function(){ 
     var dataURL = reader.result; 
     var output = document.getElementById('output'); 
     output.src = dataURL; 

    }; 
    reader.readAsDataURL(input.files[0]); 
    var hello=reader.result; 
    console.log(hello); 
    console.log(reader.result); 
    }; 
</script> 

но тот же reader.result может быть напечатан внутри нагруженном функции

я хочу способ хранения dataURL файла внешнего читателя. onload, чтобы я мог использовать его для будущего использования в любом случае?

Answer 1

Вот ваш скрипт с некоторыми каротаж указывая на то заказ будет работать:

var openFile = function(event) { 
    console.log("1. onchange triggered"); 

    var input = event.target; 

    var reader = new FileReader(); 

    console.log("2. Set handler for onload event"); 
    reader.onload = function(){ 
     console.log("5. onload handler called. Now the file is ready"); 
     var dataURL = reader.result; 
     var output = document.getElementById('output'); 
     console.log("6. Set img src to image"); 
     output.src = dataURL; 

    }; 
    console.log("3. Start reading file"); 
    reader.readAsDataURL(input.files[0]); 

    console.log("4. Try to look at the file read result, even though the file has not finished being read yet..."); 
    var hello=reader.result; 
    console.log(hello); 
    console.log(reader.result); 
}; 

JS скрипку: https://jsfiddle.net/ncwv0ocL/1/

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

Один из вариантов, чтобы сделать его немного яснее может быть, чтобы сделать что-то вроде этого:

var openFile = function(event) { 
    var input = event.target; 
    var reader = new FileReader(); 
    reader.onload = fileLoaded; // Tell the FileReader to call this function when the file is loaded 
    reader.readAsDataURL(input.files[0]); 

    // Code here should not depend on the state of the FileReader 
}; 

var fileLoaded = function (event) { 
    var dataURL = event.target.result; // The event parameter gives us the target of the event (the FileReader) 
    var output = document.getElementById('output'); 
    output.src = dataURL; 

    // Do your other stuff here with dataURL 
    console.log(dataURL); 
}; 

Одна вещь мне нравится это, что код получает выполняется в порядке, он появится на странице :)

в действии здесь: https://jsfiddle.net/ncwv0ocL/2/

Answer 2

проблема пытается просмотреть результат после того, как читатель закончен. Решение заключалось бы в том, чтобы вызвать функцию из загрузочного устройства нашего читателя, которая обеспечит любую необходимую нам функциональность, то есть обновит наше поле вывода.

var openFile = function(e) { 

    var input = e.target 
    var reader = new FileReader() 

    // Our doSomething function would do whatever is needed after we get our value. 
    // This allows us to dynamically update anything as opposed to having to check a value to see if it has been updated 

    var doSomething = function(dataURL) { 

     var output = document.getElementById('output') 

     output.src = dataURL 

     console.log(dataURL) 

    } 

    reader.onload = function() { 

     // Once we have the data, we pass it to our action that will control what we do with the result 

     doSomething(reader.result) 

    } 

    reader.readAsDataURL(input.files[0]); 

} 

Итак, наш процесс становится Загрузить файлом >>Read File >>Уведомлять вку

Here is an example of the solution on CodePen