Karena judulnya adalah contoh, saya tidak akan menjelaskan kali ini, karena saya juga telah mengumpulkan contoh ini. Saya telah merujuk sekitar 5 atau 6 plug-dan-drop plug-in dan demo, dan kemudian memilih yang terbaik, dan akhirnya menjadi contoh seperti itu. Mari kita lihat (alamat tidak dapat dijamin efektif untuk waktu yang lama. Jika gagal, silakan klik pada demo di akhir artikel untuk diunduh):
Saya merujuk ke situs web album foto asing. Perubahannya tidak banyak, tetapi gaya lagu burung dikonversi menjadi Cina, dan gaya pengunggahan juga telah diubah. Alasan untuk memilih ini adalah mudah bagi saya untuk berkembang. Ini mendukung tiga cara untuk menambahkan gambar, satu untuk mengunggah drag dan drop, satu untuk mengunggah file biasa, dan yang lainnya adalah menambahkan gambar jaringan. Ini dengan cerdik mengintegrasikan tiga mode unggahan bersama -sama, dan Anda dapat menelusuri dengan browser IE. Jika HTML5 tidak didukung, tidak ada prompt untuk mengunggah gambar, seperti yang ditunjukkan pada gambar:
Hal terpenting tentang unggahan drag-and-drop adalah kode bagian JS, yang mengimplementasikan 70% dari fungsi, dan 30% lainnya hanya mengirimkan informasi gambar ke latar belakang dan kemudian melakukan pemrosesan yang sesuai, seperti kompresi, pemangkasan, dll. Jadi mari kita lihat kode implementasi JS terlebih dahulu.
$ (). Ready (function () {
if ($. browser.safari || $ .browser.mozilla) {
$ ('#dtb-msg1 .compatible'). show ();
$ ('#dtb-msg1 .notcompatible'). hide ();
$ ('#drop_zone_home'). Hover (function () {
$ (ini) .children ('p'). stop (). animate ({top: '0px'}, 200);
},fungsi(){
$ (this) .children ('p'). stop (). animate ({top: '-44px'}, 200);
});
// Implementasi fungsi
$ (dokumen) .on ({
dragleave: function (e) {
e.preventdefault ();
$ ('. Dashboard_target_box'). RemoveClass ('over');
},
drop: function (e) {
e.preventdefault ();
//$('.dashboard_target_box').removeclass('over ');
},
Dragenter: function (e) {
e.preventdefault ();
$ ('. Dashboard_target_box'). AddClass ('over');
},
Dragover: function (e) {
e.preventdefault ();
$ ('. Dashboard_target_box'). AddClass ('over');
}
});
var box = document.geteLementById ('target_box');
box.addeventListener ("drop", function (e) {
e.preventdefault ();
// Dapatkan daftar file
var filelist = e.datatransfer.files;
var img = document.createElement ('img');
// Mendeteksi apakah itu menyeret file ke halaman
if (fileList.length == 0) {
$ ('. Dashboard_target_box'). RemoveClass ('over');
kembali;
}
// Mendeteksi apakah file itu gambar
if (filelist [0] .type.indexof ('image') === -1) {
$ ('. Dashboard_target_box'). RemoveClass ('over');
kembali;
}
if ($. browser.safari) {
// chrome8+
img.src = window.webkiturl.createObjecUrl (FileList [0]);
} else if ($. browser.mozilla) {
// ff4+
img.src = window.url.createObjecTurl (FileList [0]);
}kalau tidak{
// Instantiate Objek Pembaca File
var reader = new filereader ();
reader.onload = function (e) {
img.src = this.Result;
$ (document.body) .AppendChild (IMG);
}
reader.readasdataurl (Distist [0]);
}
var xhr = xmlhttpRequest baru ();
xhr.open ("post", "test.php", true);
xhr.setRequestheader ("X-Relquested-with", "XMlHttPRequest");
xhr.upload.addeventListener ("progress", function (e) {
$ ("#dtb-msg3"). hide ();
$ ("#dtb-msg4 span"). show ();
$ ("#dtb-msg4"). anak-anak ('span'). eq (1) .css ({lebar: '0px'});
$ ('. Show'). html ('');
if (e.lengthcomputable) {
var loaded = math.ceil ((E.Loaded / e.total) * 100);
$ ("#dtb-msg4"). Anak-anak ('span'). eq (1) .css ({lebar: (dimuat*2)+'px'});
}
}, PALSU);
xhr.addeventListener ("muat", function (e) {
$ ('. Dashboard_target_box'). RemoveClass ('over');
$ ("#dtb-msg3"). show ();
$ ("#dtb-msg4 span"). hide ();
var result = jQuery.parsejson (e.target.Responsetext);
waspada (result.filename);
$ ('. Show'). append (result.img);
}, PALSU);
var fd = formdata baru ();
fd.append ('xfile', filelist [0]);
xhr.send (fd);
},PALSU);
}kalau tidak{
$ ('#dtb-msg1 .compatible'). hide ();
$ ('#dtb-msg1 .notcompatible'). show ();
}
});
Pada awalnya, saya pertama -tama menilai jenis browser, karena ketika saya baru saja memperkenalkan, browser yang berbeda melihat antarmuka yang berbeda. Implementasi utama kode dimulai dengan implementasi fungsi. Saya tidak akan banyak bicara tentang mengapa ini adalah cara beroperasi dan apa prinsipnya. Anda dapat merujuk pada artikel ini: "Penjelasan terperinci tentang drag dan lepas unggahan di halaman beranda renren (html5 drag & drop, filereader API, formdata)". Namun, kode di bagian unggahan AJAX masih sedikit berbeda, karena Renren tampaknya sedikit merepotkan, jadi saya akan menemukan cara lain.
Akhirnya, saya mengunggah bagian dari kode PHP. Di sini saya hanya memberikan referensi, Anda dapat menulisnya sendiri sesuai dengan kebutuhan proyek.
$ r = stdclass baru ();
header ('tipe konten: aplikasi/json');
$ maxSize = 10; // MB
if ($ _ file ['xfile'] ['size']> ($ maxSize * 1048576)) {
$ r-> error = "Ukuran gambar tidak melebihi $ MaxSize MB";
}
$ folder = 'file/';
if (! is_dir ($ folder)) {
mkdir ($ folder);
}
$ folder. = $ _post ['folder']? $ _Post ['folder']. '/': '';
if (! is_dir ($ folder)) {
mkdir ($ folder);
}
if (preg_match ('/image/i', $ _files ['xfile'] ['type'])) {
$ filename = $ _post ['value']? $ _Post ['value']: $ folder. sha1 (@microTime (). '-'. $ _files ['xfile'] ['name']). '.jpg';
}kalau tidak{
$ tld = split (',', $ _files ['xfile'] ['name']);
$ tld = $ tld [count ($ tld) - 1];
$ filename = $ _post ['value']? $ _Post ['value']: $ folder. sha1 (@microTime (). '-'. $ _files ['xfile'] ['name']). $ tld;
}
$ type = array ('Image/png', 'Image/gif', 'Image/jpeg');
if (in_array ($ _ file ['xfile'] ['type'], $ type)) {
$ source = file_get_contents ($ _ file ["xfile"] ["tmp_name"]);
imageresize ($ source, $ filename, $ _post ['width'], $ _post ['height'], $ _post ['crop'], $ _post ['kualitas']);
}kalau tidak{
move_uploaded_file ($ _ file ["xfile"] ["tmp_name"], $ fileName);
}
$ path = str_replace ('test.php', '', $ _server ['script_name']);
$ r-> fileName = $ fileName;
$ r-> path = $ path;
$ r-> img = '<img src = "'. $ path. $ filename. '" />';
echo json_encode ($ r);
function imageresize ($ source, $ destination, $ width = 0, $ height = 0, $ crop = false, $ quality = 80) {
$ kualitas = $ kualitas? $ kualitas: 80;
$ image = imagecreatefromString ($ source);
if ($ image) {
// Dapatkan dimensi
$ w = ImagesX ($ Image);
$ h = Imagesy ($ Image);
if (($ width && $ w> $ width) || ($ height && $ h> $ height)) {
$ rasio = $ w / $ h;
if (($ rasio> = 1 || $ height == 0) && $ width &&! $ crop) {
$ new_height = $ width / $ rasio;
$ new_width = $ width;
} elseif ($ crop && $ rasio <= ($ width / $ height)) {
$ new_height = $ width / $ rasio;
$ new_width = $ width;
} kalau tidak {
$ new_width = $ height * $ rasio;
$ new_height = $ tinggi;
}
} kalau tidak {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width *.5; // tengah horizontal
$ y_mid = $ new_height *.5; // vertikal tengah
// Resample
error_log ('height:'. $ new_height. ' - lebar:'. $ new_width);
$ new = imagecreatetruecolor (round ($ new_width), round ($ new_height));
Imagecopyresampled ($ new, $ image, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);
// CROP
if ($ crop) {
$ crop = imagecreatetruecolor ($ width? $ width: $ new_width, $ height? $ tinggi: $ new_height);
Imagecopyresampled ($ crop, $ new, 0, 0, ($ x_mid - ($ width * .5)), 0, $ width, $ height, $ width, $ height);
// ($ y_mid - ($ height *.5))
}
// output
// Aktifkan Interlancing [untuk JPEG progresif]
ImageInterlace ($ CROP? $ CROP: $ BARU, BENAR);
$ dext = strtolower (pathinfo ($ destination, pathinfo_extension));
if ($ dext == '') {
$ dext = $ ext;
$ tujuan. = '.' . $ ext;
}
switch ($ dext) {
kasus 'jpeg':
kasus 'jpg':
ImageJpeg ($ CROP? $ CROP: $ BARU, $ DESTINGTER, $ KUALITAS);
merusak;
kasus 'png':
$ pngquality = ($ kualitas - 100) / 11.111111;
$ pngquality = round (abs ($ pngquality));
ImagePng ($ crop? $ CROP: $ baru, $ tujuan, $ pngquality);
merusak;
case 'gif':
ImageGif ($ CROP? $ CROP: $ BARU, $ DESTESTEN);
merusak;
}
@ImageDestroy ($ Image);
@ImageDestroy ($ new);
@Imagedestroy ($ crop);
}
}
PHP pada akhirnya akan mengembalikan array format JSON. Informasi yang saya kembalikan adalah alamat gambar, nama, dan kode HTML IMG. Akhirnya, array JSON diperoleh di JS dan diproses. Pada titik ini, operasi sudah berakhir.
Di awal artikel, kami juga menyebutkan bahwa kami juga mengklik untuk memilih file unggahan dan jaringan jaringan, karena keduanya tidak berada dalam ruang lingkup topik ini, jadi kami tidak akan membicarakannya. Selain itu, kedua fungsi ini tidak merepotkan untuk diimplementasikan.
unduhan demo