postęp wysyłania plików jQuery i AJAX
Wygląda na to, że nie przekazałem jasno swojego problemu. Muszę wysłać plik (używając AJAX) i muszę uzyskać postęp przesyłania pliku za pomocą nginx HttpUploadProgressModule. Potrzebuję dobrego rozwiązania tego problemu. Próbowałem z jquery.uploadprogress plugin, ale znajduję się konieczności przepisać wiele z niego, aby go do pracy we wszystkich przeglądarkach i wysłać plik za pomocą AJAX.
Wszystko, czego potrzebuję to kod, aby to zrobić i musi działać we wszystkich głównych przeglądarki (Chrome, Safari, FireFox i IE). Byłoby jeszcze lepiej, gdybym mógł uzyskać rozwiązanie, które obsłuży wiele przesyłanych plików.
używam jquery.uploadprogress plugin aby uzyskać postęp przesyłania pliku z NginxHttpUploadProgressModule. Jest to wewnątrz ramki iframe dla aplikacji facebook. Działa w Firefoksie, ale nie działa w chrome / safari.
Kiedy otwieram konsolę, dostaję to.
Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80
Jakiś pomysł jak bym naprawił to?
Chciałbym również wysłać plik za pomocą AJAX po jego zakończeniu. Jak to zaimplementować?
EDIT:
Potrzebuję tego szybko i to jest ważne, więc mam zamiar umieścić 100 punkt nagrody na to pytanie. Pierwsza osoba, która na nie odpowie, otrzyma 100 punktów.
Edytuj 2:
Jake33 pomógł mi rozwiązać pierwszy problem. Pierwsza osoba, która pozostawi odpowiedź z Jak wysłać plik z ajax zbyt otrzyma 100 punktów.
2 answers
Przesyłanie plików jest obecnie możliwe dzięki AJAXOWI. Tak, AJAX, a nie jakiś gówniany AJAX jak swf czy java.
Ten przykład może Ci pomóc: https://webblocks.nl/tests/ajax/file-drag-drop.html
(zawiera również interfejs przeciągnij/upuść, ale jest łatwo ignorowany.)
W zasadzie sprowadza się to do tego:
<input id="files" type="file" />
<script>
document.getElementById('files').addEventListener('change', function(e) {
var file = this.files[0];
var xhr = new XMLHttpRequest();
(xhr.upload || xhr).addEventListener('progress', function(e) {
var done = e.position || e.loaded
var total = e.totalSize || e.total;
console.log('xhr progress: ' + Math.round(done/total*100) + '%');
});
xhr.addEventListener('load', function(e) {
console.log('xhr upload complete', e, this.responseText);
});
xhr.open('post', '/URL-HERE', true);
xhr.send(file);
});
</script>
(demo: http://jsfiddle.net/rudiedirkx/jzxmro8r/)
Więc w zasadzie sprowadza się to do tego =)
xhr.send(file);
Gdzie file
jest typem Blob
: http://www.w3.org/TR/FileAPI/
Innym (lepszym IMO) sposobem jest użycie FormData
. To pozwala na 1) nazwę pliku, jak w formularzu i 2) wysłać inne rzeczy (pliki też), jak w formularzu.
var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);
FormData
sprawia, że kod serwera jest czystszy i bardziej kompatybilny wstecz (ponieważ żądanie ma teraz dokładnie taki sam format jak zwykłe formularze).
Oto jak obsłużyłem żądanie (1 obraz na żądanie) w PHP:
if ( isset($_FILES['file']) ) {
$filename = basename($_FILES['file']['name']);
$error = true;
// Only upload if on my home win dev machine
if ( isset($_SERVER['WINDIR']) ) {
$path = 'uploads/'.$filename;
$error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
}
$rsp = array(
'error' => $error, // Used in JS
'filename' => $filename,
'filepath' => '/tests/uploads/' . $filename, // Web accessible
);
echo json_encode($rsp);
exit;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-10 22:14:33
Oto kilka opcji używania AJAX do przesyłania plików:
AjaxFileUpload - wymaga elementu formularza na stronie, ale wgrywa plik bez przeładowywania strony. Zobacz Demo .
Uploadify - oparta na Flashu metoda przesyłania plików.
Dziesięć przykładów AJAX File Upload - został opublikowany w tym roku.
UPDATE: Oto Wtyczka JQuery do wielokrotnego przesyłania plików .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:55:04