html5 드래그 앤 드롭 업로드 이미지 예제 데모_html5 튜토리얼 기술

제목이 예제에 대한 내용이므로 이번에는 설명하지 않겠습니다. 이 예제는 드래그 앤 드롭으로 업로드된 5~6개 정도의 플러그인과 데모를 참고하여 엮은 후 그 중에서 가장 좋은 것을 넣었기 때문입니다. . 장소가 선택되었고 마침내 그러한 예가되었습니다. 함께 살펴 보겠습니다. (주소는 오랫동안 유효하다고 보장할 수 없습니다. 유효하지 않은 경우 마지막에 데모 다운로드를 클릭하십시오. 기사):

인터페이스 스타일을 말씀드리는 겁니다. 외국 사진집 사이트는 크게 바뀌지 않았는데, 그냥 새소리를 중국어로 변환해서 올려놓은 것 뿐입니다. 확장하기 쉽기 때문에 이것을 선택했습니다. 사진을 추가하는 3가지 방법을 지원합니다. 하나는 드래그 앤 드롭 업로드, 하나는 파일 업로드의 일반 선택, 다른 하나는 네트워크 사진 추가입니다. 세 가지 업로드 모드를 교묘하게 통합하고 있으며, HTML5를 지원하지 않는 경우 그림과 같이 드래그 앤 드롭하여 html5 드래그 앤 드롭 업로드 이미지 예제 데모_html5 튜토리얼 기술를 업로드하라는 메시지가 표시되지 않습니다.

드래그 앤 드롭 업로드에서 가장 중요한 부분은 코드의 js 부분으로, 이는 기능의 70%를 구현하고 나머지 30%는 html5 드래그 앤 드롭 업로드 이미지 예제 데모_html5 튜토리얼 기술 정보를 백그라운드에 제출한 다음 압축과 같은 해당 처리를 수행하는 것입니다. , 자르기 등 그럼 먼저 js 구현 코드를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

$().ready( function() {
if($.browser.safari || $.browser.mozilla){
$('#dtb-msg1 . Compatible').show()
$('#dtb -msg1 . 호환되지 않음').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;
}
//파일이 html5 드래그 앤 드롭 업로드 이미지 예제 데모_html5 튜토리얼 기술인지 감지
(fileList[0].type.indexOf('image') === -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{
//파일 판독기 객체 인스턴스화
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 스팬" ).show();
$("#dtb-msg4").children('span').eq(1).css({width:'0px'});
$('.show ').html('');
if(e.lengthComputable){
varloaded = 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-msg4span").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);
}else{
$('#dtb-msg1 . Compatible')
$ ('#dtb-msg1 .not Compatible').show();
}
})


처음에는 브라우저 유형을 먼저 결정했습니다. 방금 언급했듯이 브라우저마다 인터페이스가 다르기 때문입니다. 주요 구현 코드는 "함수 구현"에서 시작됩니다. 이 작업이 이런 방식으로 수행되는 이유와 원리는 무엇인지 자세히 설명하지 않습니다. "Renren의 드래그 앤 드롭 업로드에 대한 자세한 설명"을 참조하세요. 홈페이지(HTML5 Drag&Drop , FileReader API, formdata)"라고 되어 있는데, Ajax 업로드 부분의 코드가 아직 조금 다릅니다. Renren의 코드가 좀 귀찮은 것 같아서 다른 방법을 찾아봤습니다.
마지막 부분은 PHP 코드를 업로드하는 것입니다. 여기서는 참조만 제공하며 프로젝트의 필요에 따라 직접 작성할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

$r = new stdClass( );
header('content-type: application/json');
$maxsize = 10; //Mb
if($_FILES['xfile']['size'] > maxsize * 1048576 )){
$r->error = "html5 드래그 앤 드롭 업로드 이미지 예제 데모_html5 튜토리얼 기술 크기가 $maxsizeMB를 초과하지 않습니다."
}
$folder = 'files/'
if(!is_dir ($folder)) {
mkdir($folder)
}
$folder .= $_POST['folder'] ? '/' : ''; 🎜>if(!is_dir($folder)){
mkdir($folder);
}
if(preg_match('/image/i', $_FILES['xfile']['type' ])){
$filename = $_POST['값'] ? $_POST['값'] : $folder .sha1(@microtime() . '-' . $_FILES['xfile']['name ']) .' .jpg';
}else{
$tld = Split(',', $_FILES['xfile']['name']); count($tld) - 1];
$filename = $_POST['value'] : $folder .sha1(@microtime() . '-' . ']['이름']) .$tld;
}
$types = Array('image/png', 'image/gif', 'image/jpeg')
if(in_array( $_FILES['xfile']['type'], $types)){
$source = file_get_contents($_FILES["xfile"]["tmp_name"])
imageresize($source, $filename , $_POST['너비'], $_POST['높이'], $_POST['자르기'], $_POST['품질'])
}else{
move_uploaded_file($_FILES["xfile "]["tmp_name "], $filename);
}
$path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']);
$r-> 파일 이름 = $filename;
$r->path = $path;
$r->img = ''
echo json_encode($r);
function imageresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
$quality = $quality : 80;
$image = imagecreatefromstring($source)
if ($image) {
// 크기 가져오기
$w = Imagesx($image );
$h = imagey($image);
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 = $height * $ratio;
$new_height = $height;
}
} else {
$new_width = $w; $new_height = $h
}
$x_mid = $new_width * .5; //가로 가운데
$y_mid = $new_height * .5; //세로 가운데
// >error_log('높이: ' . $new_height . ' - 너비: ' . $new_width);
$new = imagecreatetruecolor(round($new_width), round($new_height))
imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
// 자르기
if ($crop) {
$crop = imagecreatetruecolor($width ? $width : $new_width , $height ? $height : $new_height)
imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $ height, $width, $height)
//($y_mid - ($height * .5))
}
// 출력
// 인터랜싱 활성화 [프로그레시브 JPEG의 경우]
imageinterlace($crop ? $crop : $new, true);
$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION))
if ($dext == '') {
$dext = $ext;
$destination .= '.' . $ext;
}
스위치($dext) {
case 'jpg':
imagejpeg($crop ? $crop : $new, $destination, $quality);
break
case 'png':
$pngQuality = ($quality - 100) / 11.111111; pngQuality = round(abs ($pngQuality));
imagepng($crop ? $crop : $new, $destination, $pngQuality)
break
case 'gif':
imagegif( $crop ? $new, $destination);
break
}
@imagedestroy($image)
@imagedestroy($crop) );
}
}


PHP는 결국 JSON 형식의 배열을 반환합니다. 내가 반환한 정보는 img의 html5 드래그 앤 드롭 업로드 이미지 예제 데모_html5 튜토리얼 기술 주소, 이름 및 html 코드입니다. 마지막으로 json 배열이 js에서 얻어지고 처리됩니다. 끝났습니다.
글의 시작 부분에서 언급했듯이 클릭하여 선택하는 파일 업로드와 네트워크 html5 드래그 앤 드롭 업로드 이미지 예제 데모_html5 튜토리얼 기술도 이 두 가지는 이 주제의 범위에 속하지 않으므로 이에 대해서는 언급하지 않겠습니다. 게다가, 이 두 기능은 구현하는데 번거롭지 않습니다.
데모 다운로드