5
Mam działający plik do przesyłania plików, który używa XMLHttpRequest 2 do przesyłania plików do Transloadit (usługa przetwarzania plików). Zdarzenia postępu uruchamiają się poprawnie w Firefoksie i Chrome, zarówno na komputery stacjonarne, jak i na Androida. Ale przeglądarka zasobów Androida (4.0) nie uruchamia tych zdarzeń, dlatego mój pasek postępu nie działa dla tych użytkowników mojej witryny. XHR2 i ProgressEvent są podobno obsługiwane w systemie Android od wersji 3.0, więc nie wiem, co się dzieje.Brak postępu XMLHttpRequest 2 w przeglądarce zasobów Android
Kod jest:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Upload test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="/assets/application.css" media="all" rel="stylesheet" type="text/css" /> <!-- twitter bootstrap -->
<script type="text/javascript">
var onprogress = function(e)
{
var $status = $('.status');
$status.text('onprogress: ' + (e.loaded/e.total) * 75 + '<br>');
if (e.lengthComputable) {
setProgress((e.loaded/e.total) * 75);
}
}
var setProgress = function(percent) {
percent = percent+'%';
var $progressBar = $('.progress .bar');
var $status = $('.status');
$progressBar.css('width', percent);
$progressBar.text(percent);
$status.text(percent);
};
var createAttachment = function(file) {
var params = {"blocking": true,"auth":{"key":"XXX"},"template_id":"XXX"}
var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('params', JSON.stringify(params));
data.append('attachment[file]', file);
var evtReceiver = xhr.upload || xhr;
evtReceiver.addEventListener('progress', onprogress, false);
xhr.onload = function(e) {
var resp = JSON.parse(e.target.response)
$('.image').append($('<img src="' + resp.results['android-thumb'][0].url + '">'))
setProgress(100);
};
xhr.open('POST', 'http://api2.transloadit.com/assemblies', true);
xhr.send(data);
};
$(document).ready(function() {
$('input[type=file]').on('change', function(event) {
createAttachment(event.target.files[0]);
});
});
</script>
</head>
<body>
<input type="file" name="my_file">
<div class="progress progress-striped active">
<div class="bar" style="width: 0;"></div>
</div>
<div class="status"></div>
<div class="image"></div>
</body>
</html>
Możliwe duplikat [Pierwsze XMLHttpRequest Progress z PHP Script] (http://stackoverflow.com/questions/3990933/getting-xmlhttprequest-progress-from -php-script) –