Bisakah saya menggunakan kode jQuery berikut untuk melakukan unggah file menggunakan metode POST dari permintaan ajax?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
Jika mungkin, apakah saya perlu mengisi data
bagian? Apakah ini cara yang benar? Saya hanya POST file ke sisi server.
Saya telah googling di sekitar, tetapi apa yang saya temukan adalah sebuah plugin sementara dalam rencana saya, saya tidak ingin menggunakannya. Setidaknya untuk saat ini.
javascript
jquery
ajax
post
file-upload
Willy
sumber
sumber
Jawaban:
Unggahan file
tidakdimungkinkan melalui AJAX.Anda dapat mengunggah file, tanpa menyegarkan halaman dengan menggunakan
IFrame
.Anda dapat memeriksa detail lebih lanjut di sini .
MEMPERBARUI
Dengan XHR2, Unggah file melalui AJAX didukung. Misalnya melalui
FormData
objek, tetapi sayangnya itu tidak didukung oleh semua / browser lama.FormData
dukungan dimulai dari versi browser desktop berikut.Untuk detail lebih lanjut, lihat tautan MDN .
sumber
enctype
ke"form/multipart"
!Iframes tidak lagi diperlukan untuk mengunggah file melalui ajax. Saya baru-baru ini melakukannya sendiri. Lihatlah halaman-halaman ini:
Menggunakan unggahan file HTML5 dengan AJAX dan jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
Memperbarui jawabannya dan membersihkannya. Gunakan fungsi getSize untuk memeriksa ukuran atau gunakan fungsi getType untuk memeriksa jenis. Menambahkan kode html dan css progressbar.
Cara menggunakan kelas Unggah
Kode html Progressbar
Kode css Progressbar
sumber
writer(catchFile)
. Apawriter()
?Posting ajax dan mengunggah file dimungkinkan. Saya menggunakan
jQuery $.ajax
fungsi untuk memuat file saya. Saya mencoba menggunakan objek XHR tetapi tidak bisa mendapatkan hasil di sisi server dengan PHP.Seperti yang Anda lihat, Anda harus membuat objek FormData, kosong atau dari (serial? -
$('#yourForm').serialize())
formulir yang ada, dan kemudian lampirkan file input.Berikut ini informasi lebih lanjut: - Cara mengunggah file menggunakan jQuery.ajax dan FormData - Mengunggah file melalui jQuery, objek FormData disediakan dan tidak ada nama file, DAPATKAN permintaan
Untuk proses PHP Anda dapat menggunakan sesuatu seperti ini:
sumber
formData.append('file', $('#file')[0].files[0]);
kembaliundefined
danconsole.log(formData)
tidak memiliki apa-apa kecuali_proto_
var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
Formulir Unggah Sederhana
sumber
Saya sangat terlambat untuk ini tetapi saya sedang mencari solusi pengunggahan gambar berbasis ajax dan jawaban yang saya cari agak tersebar di seluruh posting ini. Solusi yang saya setujui melibatkan objek FormData. Saya mengumpulkan bentuk dasar dari kode yang saya kumpulkan. Anda dapat melihatnya mendemonstrasikan cara menambahkan bidang khusus ke formulir dengan fd.append () serta cara menangani data respons saat permintaan ajax selesai.
Unggah html:
Jika Anda bekerja dengan php, inilah cara untuk menangani unggahan yang mencakup penggunaan kedua bidang khusus yang ditunjukkan dalam html di atas.
Upload.php
sumber
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,
mengerti mengapa ini jadi pak saya salin tempel kode Anda apa adanyafile://
, daripada menggunakan server web? Selain itu, bukan praktik terbaik untuk menyalin dan menempel kode secara membabi buta tanpa terlebih dahulu memahaminya. Saya akan merekomendasikan Anda melalui kode baris demi baris untuk mendapatkan pemahaman tentang apa yang terjadi sebelum menempatkan kode untuk digunakan.Upload AJAX memang memungkinkan dengan
XMLHttpRequest()
. Tidak perlu iframe. Kemajuan unggahan dapat ditampilkan.Untuk perinciannya lihat: Jawab https://stackoverflow.com/a/4943774/873282 untuk menanyakan jQuery Upload Progress dan unggahan file AJAX .
sumber
Begini cara saya membuatnya berfungsi:
HTML
JS
PHP
sumber
$('#file')[0].files[0]
yang merupakan semacam solusi JS aneh tanpa memerlukan yang tepat<form>
Jika Anda ingin melakukannya seperti itu:
dari
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
mungkin solusi Anda.
sumber
Lebih detail di posting blog saya: http://blog.manki.in/2011/08/ajax-fie-upload.html .
sumber
sunting: Catat jenis data dan proseskan data Anda dapat menggunakan ini untuk mengunggah file melalui Ajax ...... kirim masukan tidak boleh di luar elemen bentuk :)
sumber
Pembaruan 2019:
html
js
views.py
sumber
Gunakan FormData. Ini bekerja dengan sangat baik :-) ...
sumber
Saya telah menerapkan beberapa file pilih dengan pratinjau instan dan unggah setelah menghapus file yang tidak diinginkan dari pratinjau melalui ajax.
Dokumentasi terperinci dapat ditemukan di sini: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/
Javascript:
sumber
Saya telah menangani ini dalam kode sederhana. Anda dapat mengunduh demo yang berfungsi dari sini
Untuk kasus Anda, ini sangat mungkin. Saya akan membawa Anda langkah demi langkah bagaimana Anda dapat mengunggah file ke server menggunakan jquery AJAX.
Pertama mari kita buat file HTML untuk menambahkan elemen file form berikut seperti yang ditunjukkan di bawah ini.
Kedua, buat file jquery.js dan tambahkan kode berikut untuk menangani pengiriman file kami ke server
Itu sudah selesai. Lihat lebih banyak
sumber
Menggunakan FormData adalah cara untuk pergi seperti yang ditunjukkan oleh banyak jawaban. di sini ada sedikit kode yang berfungsi bagus untuk tujuan ini. Saya juga setuju dengan komentar blok ajax bersarang untuk menyelesaikan keadaan kompleks. Dengan menyertakan e.PreventDefault (); dalam pengalaman saya membuat kode lebih lintas browser yang kompatibel.
sumber
Menggunakan js murni lebih mudah
Di sini cuplikan lebih dikembangkan dengan penanganan kesalahan dan pengiriman json tambahan
Tampilkan cuplikan kode
sumber
Ya Anda bisa, cukup gunakan javascript untuk mendapatkan file, pastikan Anda membaca file sebagai URL data. Susun hal-hal sebelum base64 untuk benar-benar mendapatkan basis data disandikan base 64 dan kemudian jika Anda menggunakan php atau bahasa back end apa pun Anda bisa mendekode data base 64 dan menyimpannya ke dalam file seperti ditunjukkan di bawah ini
Tentu saja Anda mungkin ingin melakukan validasi seperti memeriksa jenis file yang Anda hadapi dan hal-hal seperti itu tetapi ini adalah idenya.
sumber
sumber
Anda dapat menggunakan metode ajaxSubmit sebagai berikut :) ketika Anda memilih file yang perlu diunggah ke server, formulir kirimkan ke server :)
sumber
untuk mengunggah file yang dikirimkan oleh pengguna sebagai bagian dari formulir menggunakan jquery silakan ikuti kode di bawah ini:
Kemudian mengirim objek data formulir ke server.
Kami juga dapat menambahkan File atau Blob langsung ke objek FormData.
sumber
Jika Anda ingin mengunggah file menggunakan AJAX di sini adalah kode yang dapat Anda gunakan untuk mengunggah file.
Ini adalah HTML untuk Mengunggah file
sumber
Untuk mendapatkan semua input formulir Anda, termasuk tipe = "file" Anda harus menggunakan objek FormData . Anda akan dapat melihat konten formData di debugger -> network -> Headers setelah Anda mengirimkan formulir.
sumber
sumber
Inilah ide yang saya pikirkan:
Memiliki formulir tempat Anda memindahkan INPUT: Elemen file.
Hasilnya akan dikirim ke bingkai, dan kemudian Anda bisa mengirim data yang diambil naik level ke tag gambar yang Anda inginkan dengan sesuatu seperti:
dan halaman dimuat.
Saya percaya itu bekerja untuk saya, dan tergantung Anda mungkin dapat melakukan sesuatu seperti:
sumber