html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorial

Oleh kerana tajuknya adalah mengenai contoh, saya tidak akan menerangkannya kali ini, kerana saya menggabungkan contoh ini dengan merujuk kepada kira-kira 5 atau 6 pemalam dan tunjuk cara yang dimuat naik seret dan lepas, dan kemudian meletakkan yang terbaik antaranya . Tempat itu dipilih, dan akhirnya ia menjadi contoh seperti itu Mari kita lihat bersama-sama (alamat tidak boleh dijamin untuk masa yang lama. Jika ia tidak sah, sila klik muat turun demo di penghujung. artikel itu):

Saya merujuk kepada gaya antara muka Laman web album foto asing tidak banyak mengubah lagu-lagu burung ke dalam bahasa Cina dan mengubah gaya ketika memuat naik memilih yang ini adalah bahawa ia adalah mudah bagi saya untuk mengembangkan ia menyokong 3 cara untuk menambah gambar Satu adalah seret dan lepas muat naik, satu pilihan biasa muat naik fail, dan satu lagi adalah untuk menambah gambar rangkaian. Ia bijak menyepadukan tiga mod muat naik, dan anda boleh menyemak imbasnya dengan pelayar IE Jika ia tidak menyokong HTML5, tiada gesaan untuk menyeret dan melepaskan untuk memuat naik imej, seperti yang ditunjukkan dalam gambar:

Bahagian paling penting dalam muat naik drag-and-drop ialah bahagian js kod, yang melaksanakan 70% daripada fungsi 30% yang lain hanyalah untuk menyerahkan maklumat imej ke latar belakang dan kemudian melakukan pemprosesan yang sepadan, seperti pemampatan , tanaman, dsb. Jadi mari kita lihat kod pelaksanaan js dahulu.

Salin kod

Kod tersebut adalah seperti berikut:

$().ready( function() {
if($.browser.safari || $.browser.mozilla){
$('#dtb-msg1 .compatible').show(
$('#dtb -msg1 . tidak serasi').hide();
$('#drop_zone_home').hover(function(){
$(this).children('p').stop().animate({ atas:' 0px'},200);
},function(){
$(this).children('p').stop().animate({top:'-44px'},200 );
});
//Pelaksanaan fungsi
$(document).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 senarai fail
var fileList = e.dataTransfer.files;
var img = document.createElement('img'); .length == 0) {
$('.dashboard_target_box').removeClass('over');
kembali; (fileList[0].type. indexOf('html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorial') === -1){
$('.dashboard_target_box').removeClass('over');
return; >if($.browser.safari ){
//Chrome8
img.src = window.webkitURL.createObjectURL(fileList[0]); 🎜>//FF4
img.src = window.URL.createObjectURL(fileList[0]); ;
reader.onload = function(e){
img.src = this.result;
$(document.body).appendChild(img)
readAsDataURL(); fileList[0]);
}
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true); -Requested-With", "XMLHttpRequest ");
xhr.upload.addEventListener("progress", function(e){
$("#dtb-msg3").hide();
$ ("#dtb-msg4 span" ).show();
$("#dtb-msg4").kanak-kanak('span').eq(1).css({width:'0px'});
$('.show ').html('');
if(e.lengthComputable){
var dimuatkan = Math.ceil((e.loaded / e.total) * 100);
$("#dtb -msg4").kanak-kanak('span').eq(1).css({lebar:(dimuatkan*2) 'px'}); false);
xhr. addEventListener("load", function(e){
$('.dashboard_target_box').removeClass('over');
$("#dtb-msg3"). show();
$ ("#dtb-msg4 span").hide();
var result = jQuery.parseJSON(e.target.responseText); 🎜>$('.show' ).append(result.img);
}, false ; var fd = new FormData(); ]);
xhr ('#dtb-msg1 .notcompatible ').show();
}
});
Pada mulanya, saya mula-mula menentukan jenis penyemak imbas, kerana seperti yang dinyatakan sebentar tadi, pelayar yang berbeza melihat antara muka yang berbeza. Kod pelaksanaan utama bermula dari "Pelaksanaan Fungsi". Saya tidak akan menerangkan secara terperinci mengapa operasi ini dilakukan dengan cara ini dan apakah prinsipnya Anda boleh merujuk artikel ini: "Penjelasan terperinci tentang muat naik seret dan lepas pada Renren laman utama (HTML5 Drag&Drop , FileReader API, formdata)", tetapi kod untuk bahagian muat naik ajax masih agak berbeza, kerana yang Renren nampaknya agak menyusahkan, jadi saya mencari cara lain.
Bahagian terakhir ialah memuat naik kod PHP Di sini saya hanya menyediakan rujukan, anda boleh menulisnya sendiri mengikut keperluan projek.

Salin kod

Kod tersebut adalah seperti berikut:

$r = new stdClass( );
header('content-type: application/json');
$maxsize = 10; maxsize * 1048576 )){
$r->error = "Saiz imej tidak melebihi $maxsize MB"; ($folder)) {
mkdir($folder);
}
$folder .= $_POST['folder'] ? 🎜>if(! is_dir($folder)){
mkdir($folder);
}
if(preg_match('/html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorial/i', $_FILES['xfile']['type' ])){
$nama fail = $_POST['nilai'] ? $_POST['nilai'] : $folder . '-' . $_FILES['xfile']['nama ']) . ' .jpg';
}lain{
$tld = split(',', $_FILES['xfile']['name']); count($tld) - 1];
$nama fail = $_POST['value'] ? $_POST['value'] : $folder . '-' . $_FILES['xfile ']['name ']) . $tld;
}
$types = Array('html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorial/png', 'html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorial/gif', 'html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorial/jpeg'); $_FILES['xfile ']['type'], $types)){
$source = file_get_contents($_FILES["xfile"]["tmp_name"]); , $_POST[' lebar'], $_POST['tinggi'], $_POST['crop'], $_POST['kualiti']); "]["tmp_name "], $filename);
}
$path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']);
$r-> nama fail = $nama fail;
$r->path = $path;
$r->img = '';
echo json_encode($r);
function html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
$kualiti = $kualiti ? $kualiti : 80;
$imej = html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialcreatefromstring($source); );
$h = html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialsy($imej);
if (($width && $w > $width) || ($height && $h > $height)) {
$ratio = $w / $ h;
jika (($nisbah >= 1 || $tinggi == 0) && $lebar && !$crop) {
$tinggi_baru = $lebar / $nisbah; >$new_width = $ width;
} elseif ($crop && $nisbah $new_height = $width / $nisbah
$new_width = $width ;
} lain {
$lebar_baharu = $tinggi * $nisbah;
$tinggi_baru = $tinggi; $height_baru = $h ;
}
$x_mid = $new_width * .5; //tengah mendatar
$y_mid = $new_height * .5; //tengah menegak
// Sampel semula
error_log('height : ' . $new_height . ' - width: ' . $new_width
$new = html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialcreatetruecolor(bulat($new_width), round($new_height)); $imej, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
// Tanaman
jika ($crop) {
$crop = html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialcreatetruecolor($width ? $width : $new_width , $height ? $height : $new_height ); tinggi, $width, $height);
//($y_mid - ($height * .5))
}
// Output
// Dayakan interlancing [untuk JPEG progresif]
html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialinterlace($crop ? $crop : $new, true);
$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION)); = $ext;
$destinasi .= '.' $ext; html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialjpeg($crop ? $crop : $new, $destination, $quality); pngQuality = bulat(abs ($pngQuality));
html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialpng($crop ? $crop : $new, $destination, $pngQuality); $crop ? $new, $destination);
}
@html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialdestroy($html5 seret dan lepas muat naik gambar contoh demonstration_html5 kemahiran tutorialdestroy($new); );
}
}


PHP akhirnya akan mengembalikan tatasusunan dalam format JSON Maklumat yang saya kembalikan ialah alamat imej, nama dan kod html img Akhirnya, tatasusunan json diperoleh dan diproses dalam js sudah berakhir.
Seperti yang dinyatakan pada permulaan artikel, terdapat juga muat naik fail klik untuk pilih dan imej rangkaian Memandangkan kedua-dua ini tidak termasuk dalam skop topik ini, saya tidak akan membincangkannya. Lebih-lebih lagi, kedua-dua fungsi ini tidak menyusahkan untuk dilaksanakan.
muat turun demo