jQuery Yükleme devam ediyor ve AJAX dosya yükleme
Açıkça sorunumu bildirdim değil gibi görünüyor. Bir dosya göndermem gerekiyor (AJAX kullanarak) ve dosya Nginx HttpUploadProgressModule kullanarak karşıya yükleme ilerlemesini lazım. Bu sorun için iyi bir çözüm gerekiyor. Jquery ile denedim.eklenti uploadprogress, ama çok bu tüm tarayıcılarda işe almak için yeniden yazmak ve dosya göndermek için kendime olan AJAX kullanarak buluyorum.
Tek ihtiyacım bunu yapmak için kod ve tüm büyük tarayıcılar (Chrome, Safari, FireFox ve IE çalışmak gerekiyor. Eğer birden fazla dosya yüklenenler idare edecek bir çözüm bulabilirsem daha da iyi olur.
Açtığımda da bu olsun konsol.
Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80
Bunu düzeltmek istiyorum nasıl bir fikriniz var mı?
Bu bittikten sonra da dosyayı AJAX kullanarak göndermek istiyorum. Bunu nasıl uygular ki?
DÜZENLEME:
EDİT 2:
CEVAP
Dosyaları yüklemek aslında AJAX ile mümkün bu gün. Evet, AJAX yüklenen ya da java gibi boktan AJAX özentilerinin değil.
Size yardımcı olabilir bu örnek: http://js1.hotblocks.nl/tests/ajax/file-drag-drop.html
(Ayrıca sürükle/bırak arayüzü içerir, ancak kolayca görmezden geldi.)
İş bu noktaya geldiğinde temelde bu
<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/)
Bu=) gelse ne yani temelde
xhr.send(file);
file
Blob
sattığınız nerede: http://www.w3.org/TR/FileAPI/
(IMO) başka bir yolu FormData
kullanmaktır. Bu sizin için sağlar 1) Bir dosya, form ve 2) adı (dosyaları da), benzer bir form gönderin.
var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);
FormData
sunucu kodu daha temiz ve daha uyumlu isteği şimdi normal form olarak aynı biçime sahip beri) yapar.
Hepsini değil deneysel, ama çok modern. Ve Firefox 4 Chrome 8 ne yapacağımı, ama diğerleri hakkında bilgim yok.
Bu istek, istek başına 1 Resim) PHP nasıl idare ettiğimi
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;
}
jQuery Ajax Dosya Yükleme...
AJAX ile dosya yükleme, HTML5 ve jQuer...
Birisi jQuery Dosya Yükleme eklentisi ...
Yükleme jQuery AJAX ile domain html sa...
Bul ve Git repo silinmiş bir dosya ger...