Как загрузить файл с помощью javascript?

Question

<form method="post" action="#" onsubmit="uploadImage"> 
    <input type="file" name="imgFile" > 
    <input type="submit" id="submit" value="upload"> 
</form> 

Как загрузить изображение с помощью javascript с помощью вызова ajax.

Answer 1

Да, возможно, здесь очень простой пример кода:

function upload() 
{ 
    var data = new FormData(), 
     files = // some <input type="file" /> 

    data.append('image', files[0]); 

    $.ajax({ 
     url: // Your ajax url, say it's upload.php, 
     type: 'post', 
     dataType: 'json', 
     data: data, 
     processData: false, 
     contentType: false, 
     success: function(image) 
     { 
      // whatever you want to do 
     } 
    }); 
}; 

Тогда в upload.php вам нужно выбрать $_POST значение и сделать загрузку с move_uploaded_file рода вещей.

Answer 2

Это просто быстрое решение для JavaScript, если вы хотите чистый JS.

var file = document.getElementById('id of your input:file').files[0]; 
var ajax = new XMLHttpRequest; 

var formData = new FormData; 
formData.append('imagefile', file); 

ajax.upload.addEventListener("progress", myProgressHandler, false); 
ajax.addEventListener('load', myOnLoadHandler, false); 
ajax.open('POST', 'upload.php', true); 
ajax.send(formData); 

Примечание: Некоторые источники говорят, что вызов open метод Ajax должен прийти после создания объекта (перед любой работой с ajax в данном случае), но лично меня никогда не было никаких проблем, используя его таким образом. Так что это зависит от вас.

События:

function myProgressHandler(event) { 
    //your code to track upload progress 
    var p = Math.floor(event.loaded/event.total*100); 
    document.title = p+'%'; 
} 

function myOnLoadHandler(event) { 
    // your code on finished upload 
    alert (event.target.responseText); 
} 

Вы также можете добавить больше обработчиков событий, таких как "error" или "abort". Конечно, вам нужно написать upload.php для обработки загруженных файлов (PHP - это просто пример, есть много примеров, как это сделать на SO).

Все, что вам нужно, это сделать вызов Ajax на событие «change» вашего элемента входного файла (верхняя часть кода).

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

function featuresCheck() { 
    var res = window.XMLHttpRequest && window.FormData && window.addEventListener; 
    if (res) return true; else return false; 
} 

/* and test it in your code */ 
if (featuresCheck()) { 
    // use ajax upload 
    } 
else { 
    // use simple file uploader 
    } 

Если вы хотите использовать multiple свойство файл-вход, вы не можете использовать .files[0] (первый файл выбраны) и вы будете нуждаться в каком-то цикле по списку файлов и сделать отдельные загрузки для каждого из них (асинхронных из курс).

Знайте о безопасности. Сделайте двойную проверку загруженных файлов, прежде чем перемещать их из временного местоположения (проверьте тип MIME, расширение, переименуйте их).