5
Ich habe ein Arbeitsdatei-Upload-Formular, das XMLHttpRequest 2 verwendet, um Dateien zu Transloadit (ein Dateiverarbeitungsdienst) hochzuladen. Die Fortschrittsereignisse werden in Firefox und Chrome sowohl für Desktop als auch für Android korrekt ausgelöst. Aber der Android (4.0) -Bestands-Browser löst diese Ereignisse nicht aus, daher funktioniert mein Fortschrittsbalken nicht für die Benutzer meiner Website. XHR2 und ProgressEvent werden angeblich seit 3.0 in Android unterstützt, also weiß ich nicht, was los ist.Keine XMLHttpRequest 2 Fortschritt in Android-Stock-Browser
Der Code ist:
<!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>
Mögliche Duplikat [Erste XMLHttpRequest Fortschritt von PHP Script] (http://stackoverflow.com/questions/3990933/getting-xmlhttprequest-progress-from -php-script) –