Forum atau bilah pos sering perlu berbagi banyak gambar. Cara yang buruk untuk mengunggah gambar adalah dengan mengunggahnya ke server pusat, dan kemudian meneruskannya ke server gambar statis. Artikel ini memperkenalkan cara menggunakan Plupload untuk mengoptimalkan proses unggahan dan memotong server untuk langsung mengunggah gambar dalam batch ke cloud youpai. Artikel ini akan berbicara tentang poin -poin penting berikut:
Salinan kode adalah sebagai berikut:
PERPUSTAKAAN PLUPLOAD
Kompresi gambar lokal
Beberapa gambar pilihan
Bypass server dan unggah gambar langsung ke youpaiyun
Menggunakan API Formulir HTTP
Konfigurasi Plupload
PERPUSTAKAAN PLUPLOAD
Plupload adalah plugin unggahan gambar yang sangat kaya. Browser versi rendah dapat mendukung unggahan batch melalui flash/silverlight/html4, sementara di browser versi yang lebih tinggi, mereka akan diberikan prioritas untuk mengunggah menggunakan antarmuka HTML5. Semua ini otomatis, dan dapat dikatakan bahwa sangat nyaman untuk digunakan! Kedua, Plupload juga mendukung fungsi seperti mengompresi gambar pada klien dan mengunggahnya langsung pada drag & drop. Untuk detailnya, Anda dapat pergi ke situs web resminya untuk mempelajari informasi lebih lanjut.
Di sini kami hanya menggunakan API intinya, cukup perkenalkan file.
Salinan kode adalah sebagai berikut:
<skrip src = "lib/plupload-2.1.2/js/plupload.full.min.js"> </script>
Contoh API inti yang diberikan oleh pejabat sangat sederhana, Anda dapat langsung melihatnya di http://www.plupload.com/examples/core. Tidak ada kesulitan dalam memahami API inti. Jika Anda membutuhkan bantuan, Anda dapat mengajukan pertanyaan nanti di artikel ini.
Kompresi gambar lokal
Secara umum, kualitas gambar yang Anda telusuri di halaman web tidak tinggi. Saya ingat bahwa ketika saya sedang belajar PS di sekolah menengah, guru mengatakan bahwa resolusi gambar online akan menjadi 72, dan gambar yang dicetak harus 300. Oleh karena itu, ketika pengguna mengunggah foto besar, lebih baik menggunakannya untuk mengompres gambar secara lokal pada klien pengguna dan mengunggah lepas yang dikompresi.
Fungsi kompresi lokal dari gambar didukung dalam plupload, cukup lulus dalam parameter mengubah ukuran saat menginisialisasi. Di antara mereka, lebar dan tinggi dapat ditetapkan sesuai dengan situasi aktual, dan kualitas adalah parameter yang relatif penting. Seperti namanya, semakin kecil nilainya ditetapkan, semakin kecil gambarnya, tetapi semakin buruk kualitas tampilannya. Anda harus menimbang ini sendiri.
Salinan kode adalah sebagai berikut:
{
"mengubah ukuran": {
"Lebar": 200,
"Tinggi": 200,
"Kualitas": 70
}
}
Beberapa gambar pilihan
Salah satu prasyarat untuk mengunggah gambar gambar adalah kemampuan untuk memilih beberapa gambar. File pilihan multi-select adalah fitur standar HTML5. Kami dapat mengaktifkan mode multi-select dengan cara berikut:
Salinan kode adalah sebagai berikut:
<Form Action = "xxx">
Pilih gambar: <input type = "file" name = "img" Multiple> <!- Multiple adalah kunci di sini! ->
<input type = "kirim">
</form>
Menurut bagian beberapa pemilihan file dalam dukungan browser dari JQuery-File-Upload, IE telah berkembang sampai IE10 bahwa ia baru saja mulai mendukung fitur HTML5, jadi kami harus menggunakan kekuatan ajaib Flash untuk mendukung gambar ganda-select untuk browser versi yang lebih rendah. Untungnya, Plupload telah membantu kami melakukan ini, dan sakelar ini dihidupkan secara default. Jika Anda pikir Anda tidak perlu menggunakan gambar multi-terpilih, Anda dapat mengatur Multi_Selection: Salah untuk mematikan fitur ini.
Bypass server dan unggah gambar langsung ke youpaiyun
YouPaiyun menyediakan HTTP Form API. Melalui antarmuka ini, kami dapat secara langsung memulai permintaan untuk mengunggah gambar dari browser tanpa harus mentransfer melalui server kami sendiri, yang sangat mengurangi overhead.
Menggunakan API Formulir HTTP
Menggunakan antarmuka ini, Anda perlu mengirim formulir ke youpaiyun. Formulir ini berisi file yang ingin Anda unggah, dan juga perlu memasukkan kebijakan dan tanda tangan. Kebijakan digunakan untuk mentransfer parameter yang terkait dengan permintaan unggahan, seperti jalur menyimpan, jenis file, hasil preprocessing, dll., Dan juga termasuk waktu hibah permintaan unggahan, dll. Tanda tangan digunakan untuk verifikasi keamanan.
Untuk kenyamanan demonstrasi, kami menggunakan JavaScript secara langsung untuk menghasilkan kebijakan dan tanda tangan di sini. Tetapi dalam penggunaan aktual, untuk alasan keamanan, harap selesaikan proses ini di sisi server. Kode berikut telah dimodifikasi berdasarkan demo resmi, terutama menggunakan akun uji resmi. Untuk metode generasi spesifik dari dua parameter ini, silakan merujuk ke dokumen resmi: http://docs.upyun.com/api/form_api/.
Salinan kode adalah sebagai berikut:
var options = {
'Bucket': 'Demonstrasi',
'save-key': '/test/filename.txt',
'kedaluwarsa': math.floor (tanggal baru (). getTime () / 1000) + 86400
};
// Lihat lebih banyak parameter: http://docs.upyun.com/api/form_api/#form API Interface Pendahuluan
var kebijakan = window.btoa (json.stringify (opsi));
// Dapatkan Formulir API dari Backend Manajemen Pengguna Upyun
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =';
// Hitung tanda tangan
var Signature = md5 (kebijakan + '&' + form_api_secret);
Konfigurasi Plupload
Cara Membuat Plupload Berfungsi dengan Formulir HTTP YouPaiyun API benar -benar membuat saya sakit kepala. Dalam dokumen yang melihat Plupload, penemuan yang tidak terduga membuat saya melihat fajar. Tautan mengunggah ke Amazon S3 menarik saya. Nama lengkap Amazon S3 adalah Amazon Simple Storage Service, dan layanan penyimpanan cloud yang disediakannya lebih atau kurang mirip dengan YouPaiyun.
Jadi berdasarkan Konfigurasi Pengantar Browser di artikel ini, saya menemukan konfigurasi yang diperlukan untuk mengunggahnya ke YoUpaiyun. Bahkan, sangat mudah untuk dikatakan, terutama mengkonfigurasi dua parameter URL dan multipart_params. Opsi. Bucket, Kebijakan dan Tanda Tangan dalam Contoh -contoh berikut secara langsung digunakan untuk menghitung nilai di bagian sebelumnya.
Salinan kode adalah sebagai berikut:
var unggah = new plupload.uploader ({
...
URL: 'http://v0.api.upyun.com/' + options.bucket,
multipart_params: {
'FileName': '$ {FileName}', // Menambahkan ini untuk menjaga konsistensi di seluruh runtime
'Tipe konten': '',
'Kebijakan': Kebijakan,
'Signature': tanda tangan,
},
...
});
Meringkaskan
Dengan cara ini, kami akhirnya menyadari bahwa melewati server melalui plupload dan mengunggah gambar dalam batch ke youpaiyun. Plupload benar -benar perpustakaan yang sangat kuat, tetapi dapat dibebankan untuk penggunaan komersial. Silakan buka situs web resminya untuk mempelajari lebih lanjut!
Bukankah itu sangat sederhana? Hal utama adalah idenya sangat bagus dan layak dipelajari. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan semua orang akan membuat kemajuan bersama