html5 拖曳上傳圖片實例示範_html5教學技巧

因為標題寫的是實例，所以本次就不做講解了，因為這個實例我也算是東拼西湊整出來的，參考了大概5、6款拖曳上傳的插件和demo，然後把其中好的地方挑出來，最後就成了這麼一個實例，一起來看下吧（地址不能保證長久有效，如果失效請在文章最後點擊demo下載）：
 
界面樣式我是參考了一個國外的相簿網站，改動不大，只是把鳥語轉換成中文，以及上傳時的樣式也進行了改動，之所以選這個的原因就是，我很容易做擴展，它支持3種方式添加圖片，一種拖曳上傳，一種常規的選擇檔案上傳，另外的就是添加網路圖片。它很巧妙的把三種上傳模式整合到了一起，而且你可以用IE瀏覽器瀏覽下，如果不支援HTML5，是沒有拖曳上傳圖片的提示的，如圖：
 
拖曳上傳最重要的就是js部分的程式碼，它實現了70%的功能，另外30%只是把圖片資訊提交到後台，然後做對應的處理，例如壓縮啊，裁剪啊雲雲。所以先來看下js實作程式碼吧。

複製程式碼

程式碼如下:

$().ready(function().ready(function().ready(function().ready(function().ready(function().ready(function().ready(function().ready(function()). {
if($.browser.safari || $.browser.mozilla){
$('#dtb-msg1 .compatible').show();
$('#dtb-msg1 . notcompatible').hide();
$('#drop_zone_home').hover(function(){
$(this).children('p').stop().animate({top:' 0px'},200);
},function(){
$(this).children('p').stop().animate({top:'-44px'},200);
});
//功能實作
$(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();
//取得檔案清單
var fileList = e.dataTransfer.files;
var img = document.createElement('img');
//偵測是否是拖曳檔案到頁面的操作
if(fileList.length == 0) {
$('.dashboard_target_box').removeClass('over');
return;
}
//偵測檔案是不是圖片
if(fileList[0].type. indexOf('html5 拖曳上傳圖片實例示範_html5教學技巧') === -1){
$('.dashboard_target_box').removeClass('over');
return;
}
if($.browser.safari ){
//Chrome8
img.src = window.webkitURL.createObjectURL(fileList[0]);
}else if($.browser.mozilla){
//FF4
img.src = window.URL.createObjectURL(fileList[0]);
}else{
//實例化file reader物件
var reader = new FileReader();
reader.onload = function(e){
img.src = this.result;
$(document.body).appendChild(img);
}
reader.readAsDataURL(fileList[0]);
}
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest ");
xhr.upload.addEventListener("progress", function(e){
$("#dtb-msg3").hide();
$("#dtb-msg4 span" ).show();
$("#dtb-msg4").children('span').eq(1).css({width:'0px'});
$('.show ').html('');
if(e.lengthComputable){
var loaded = Math.ceil((e.loaded / e.total) * 100);
$("#dtb -msg4").children('span').eq(1).css({width:(loaded*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);
alert(result.filename);
$('.show' ).append(result.img);
}, false);
var fd = new FormData();
fd.append('xfile', fileList[0]);
xhr. send(fd);
},false);
}else{
$('#dtb-msg1 .compatible').hide();
$('#dtb-msg1 .notcompatible ').show();
}
});

開始我是先判斷瀏覽器類型，因為剛才介紹過，不同瀏覽器看到的是不同介面。主要實作程式碼是從「功能實現」開始的，這塊具體為何這樣操作，原理是什麼，我就不多說了，大家可以參考下這篇文章：《人人網首頁拖曳上傳詳解(HTML5 Drag&Drop 、FileReader API、formdata)》，不過ajax上傳部分的程式碼還是有點不一樣的，因為人人那個似乎有點麻煩，我就另尋途徑了。
　　最後就是上傳部分的PHP程式碼了，這裡我只是提供個參考，你可以依照專案的需求來自己寫。

複製程式碼

程式碼如下:

$r = new stdClass()
header('content-type: application/json');
$maxsize = 10; //Mb
if($_FILES['xfile']['size'] > ($maxsize * 1048576) ){
$r->error = "圖片大小不超過$maxsize MB";
}
$folder = 'files/';
if(!is_dir($folder)){
mkdir($folder);
}
$folder .= $_POST['folder'] ? $_POST['folder'] . '/' : '';
if(!is_dir( $folder)){
mkdir($folder);
}
if(preg_match('/html5 拖曳上傳圖片實例示範_html5教學技巧/i', $_FILES['xfile']['type'])){
$filename = $_POST['value'] ? $_POST['value'] : $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) . '.jpg ';
}else{
$tld = split(',', $_FILES['xfile']['name']);
$tld = $tld[count($tld) - 1 ];
$filename = $_POST['value'] ? $_POST['value'] : $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name'] ) . $tld;
}
$types = Array('html5 拖曳上傳圖片實例示範_html5教學技巧/png', 'html5 拖曳上傳圖片實例示範_html5教學技巧/gif', 'html5 拖曳上傳圖片實例示範_html5教學技巧/jpeg');
if(in_array($_FILES['xfile'] ['type'], $types)){
$source = file_get_contents($_FILES["xfile"]["tmp_name"]);
html5 拖曳上傳圖片實例示範_html5教學技巧resize($source, $filename, $_POST['width' ], $_POST['height'], $_POST['crop'], $_POST['quality']);
}else{
move_uploaded_file($_FILES["xfile"]["tmp_name"] , $filename);
}
$path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']);
$r->filename = $filename;
$r->path = $path;
$r->img = '';
echo json_encode($ r);
function html5 拖曳上傳圖片實例示範_html5教學技巧resize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
$quality = $quality ? $quality : 80;
$html5 拖曳上傳圖片實例示範_html5教學技巧 = html5 拖曳上傳圖片實例示範_html5教學技巧createfromstring($source);
if ($html5 拖曳上傳圖片實例示範_html5教學技巧) {
// Get dimensions
$w = html5 拖曳上傳圖片實例示範_html5教學技巧sx($html5 拖曳上傳圖片實例示範_html5教學技巧);
$h = html5 拖曳上傳圖片實例示範_html5教學技巧sy($html5 拖曳上傳圖片實例示範_html5教學技巧 );
if (($width && $w > $width) || ($height && $h > $height)) {
$ratio = $w / $h;
if (($ ratio >= 1 || $height == 0) && $width && !$crop) {
$new_height = $width / $ratio;
$new_width = $width;
} elseif ($crop && $ratio $new_height = $width / $ratio;
$new_width = $width;
} else {
$new_width = $heightwidth = $height $ratio;
$new_height = $height;
}
} else {
$new_width = $w;
$new_height = $h;
}
$x_mid = $new_width * .5; //horizo​​ntal middle
$y_mid = $new_height * .5; //vertical middle
// Resample
error_log('height: ' . $new_height . ' - width: ' . $new_width);
$new = html5 拖曳上傳圖片實例示範_html5教學技巧createtruecolor(round($new_width), round($new_height));
html5 拖曳上傳圖片實例示範_html5教學技巧copyresampled($new, $html5 拖曳上傳圖片實例示範_html5教學技巧, 0, 0, 0, 0, $new_heightth, $new_new. , $w, $h);
// Crop
if ($crop) {
$crop = html5 拖曳上傳圖片實例示範_html5教學技巧createtruecolor($width ? $width : $new_width, $height ? $height : $new_height);
html5 拖曳上傳圖片實例示範_html5教學技巧copyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
//($ y_mid - ($height * .5))
}
// Output
// Enable interlancing [for progressive JPEG]
html5 拖曳上傳圖片實例示範_html5教學技巧interlace($crop ? $crop : $new, true);
$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
if ($dext == '') {
$dext = $ext;
$destination .= '.' . $ ext;
}
switch ($dext) {
case 'jpeg':
case 'jpg':
html5 拖曳上傳圖片實例示範_html5教學技巧jpeg($crop ? $crop : $new, $destination, $quality );
break;
case 'png':
$pngQuality = ($quality - 100) / 11.111111;
$pngQuality = round(abs($pngQuality))
$pngQuality = round(abs($pngQuality)); $crop ? $crop : $new, $destination, $pngQuality);
break;
case 'gif':
html5 拖曳上傳圖片實例示範_html5教學技巧gif($crop ? $crop : $new, $destination);
break;
}
@html5 拖曳上傳圖片實例示範_html5教學技巧destroy($html5 拖曳上傳圖片實例示範_html5教學技巧);
@html5 拖曳上傳圖片實例示範_html5教學技巧destroy($new);
@html5 拖曳上傳圖片實例示範_html5教學技巧destroy($crop);
}
}

PHP最後會回傳一個JSON格式的數組，我回傳的資訊就是圖片位址、名稱，還有段img的html程式碼，最後在js那邊取得到json數組並處理，至此，操作結束。
文章最開始提到，還有點擊選擇檔案上傳和網路圖片，因為這2個不屬於這次的主題範圍內，就不說了。況且這2個功能實現起來都不麻煩。
demo下載