제목이 예를 들어,이 예를 찍었 기 때문에 이번에는 설명하지 않을 것입니다. 나는 약 5 ~ 6 개의 드래그 앤 드롭 플러그 및 데모를 언급 한 다음 최고의 플러그인을 골라서 마침내 그러한 예가되었습니다. 살펴 보겠습니다 (주소는 오랫동안 효과적이지 않을 수 없습니다. 실패하면 기사 끝의 데모를 클릭하여 다운로드하십시오).
외국 사진 앨범 웹 사이트를 참조하십시오. 변화는 많지 않지만 새 노래의 스타일은 중국어로 변환되며 업로드 스타일도 변경되었습니다. 이것을 선택하는 이유는 확장하기가 쉽기 때문입니다. 사진을 추가하는 세 가지 방법을 지원합니다. 하나는 드래그 앤 드롭을 업로드하고 하나는 일반 파일을 업로드하고 다른 하나는 네트워크 사진을 추가하는 것입니다. 세 가지 업로드 모드를 함께 통합하고 IE 브라우저로 탐색 할 수 있습니다. HTML5가 지원되지 않으면 그림과 같이 사진을 업로드 할 프롬프트가 없습니다.
드래그 앤 드롭 업로드에서 가장 중요한 것은 JS 부품 코드입니다.이 코드는 기능의 70%를 구현하고 다른 30%는 단순히 이미지 정보를 배경에 제출 한 다음 압축, 자르기 등과 같은 해당 처리를 수행합니다. 따라서 JS 구현 코드를 먼저 살펴 보겠습니다.
$ (). ready (function () {
if ($. browser.safari || $ .Browser.Mozilla) {
$ ( '##dtb-msg1 .compatible'). show ();
$ ( '##dtb-msg1 .NotCompatible'). hide ();
$ ( '#drop_zone_home'). hover (function () {
$ (이)
},기능(){
$ (이)
});
// 기능 구현
$ (문서) .on ({
드래그 리브 : 기능 (e) {
e.preventDefault ();
$ ( '. dashboard_target_box'). removeClass ( 'over');
},
드롭 : 함수 (e) {
e.preventDefault ();
//$('.dashboard_target_box ').removeclass('over ');
},
Dragenter : function (e) {
e.preventDefault ();
$ ( '. dashboard_target_box'). addClass ( 'over');
},
드래그 오버 : 함수 (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');
반품;
}
// 파일이 사진인지 감지합니다
if (filElist [0] .type.indexof ( 'image') === -1) {
$ ( '. dashboard_target_box'). removeClass ( 'over');
반품;
}
if ($. Browser.safari) {
// chrome8+
img.src = wind
} else if ($. browser.mozilla) {
// ff4+
img.src = window.url.createobjecturl (filelist [0]);
}또 다른{
// 파일 리더 객체를 인스턴스화합니다
var reader = new Filereader ();
reader.onload = function (e) {
img.src = this.result;
$ (document.body) .AppendChild (IMG);
}
reader.readasdataurl (filelist [0]);
}
var xhr = 새로운 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 ({너비 : '0px'});
$ ( '. show'). html ( '');
if (e.lengthcomputable) {
var loaded = math.ceil ((e.loaded / e.total) * 100);
$ ( "#dtb-msg4"). children ( 'span'). eq (1) .css ({너비 : (로드*2)+'px'});
}
}, 거짓);
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);
}, 거짓);
var fd = new FormData ();
fd.append ( 'xfile', filelist [0]);
xhr.send (fd);
},거짓);
}또 다른{
$ ( '##dtb-msg1 .compatible'). hide ();
$ ( '##dtb-msg1 .NotCompatible'). show ();
}
});
처음에는 브라우저 유형을 먼저 판단했습니다. 방금 도입 한 것처럼 다른 브라우저마다 다른 인터페이스가 나타납니다. 코드의 주요 구현은 기능 구현으로 시작됩니다. 이것이 왜 이것이 어떻게 작동하는지와 원칙이 무엇인지에 대해별로 말하지 않을 것입니다. 이 기사를 참조 할 수 있습니다. "Renren Home Page (HTML5 드래그 앤 드롭, Filereader API, FormData)의 드래그 앤 드롭 업로드에 대한 자세한 설명". 그러나 Renren은 약간 번거로운 것처럼 보이므로 Ajax 업로드 부분의 코드는 여전히 약간 다릅니다. 그래서 나는 다른 방법을 찾을 것입니다.
마지막으로 PHP 코드의 일부를 업로드하고 있습니다. 여기서 나는 단지 참조를 제공합니다. 프로젝트의 요구에 따라 직접 쓸 수 있습니다.
$ r = new stdclass ();
헤더 ( 'content-type : application/json');
$ maxsize = 10; // MB
if ($ _ files [ 'xfile'] [ 'size']> ($ maxsize * 1048576)) {
$ r-> error = "이미지 크기가 $ maxsize mb를 초과하지 않습니다";
}
$ folder = 'files/';
if (! is_dir ($ 폴더)) {
mkdir ($ 폴더);
}
$ 폴더. = $ _post [ '폴더']? $ _post [ '폴더']. '/': '';
if (! is_dir ($ 폴더)) {
mkdir ($ 폴더);
}
if (preg_match ( '/image/i', $ _files [ 'xfile'] [ 'type'])) {
$ filename = $ _post [ 'value']? $ _post [ 'value'] : $ 폴더. sha1 (@microtime (). '-'. $ _files [ 'xfile'] [ 'name']). '.jpg';
}또 다른{
$ tld = split ( ',', $ _files [ 'xfile'] [ 'name']);
$ tld = $ tld [count ($ tld) -1];
$ filename = $ _post [ 'value']? $ _post [ 'value'] : $ 폴더. sha1 (@microtime (). '-'. $ _files [ 'xfile'] [ 'name']). $ tld;
}
$ type = array ( 'image/png', 'image/gif', 'image/jpeg');
if (in_array ($ _ files [ 'xfile'] [ 'type'], $ type)) {
$ source = file_get_contents ($ _ files [ "xfile"] [ "tmp_name"]);
imageResize ($ source, $ filename, $ _post [ 'width'], $ _post [ 'height'], $ _post [ 'crop'], $ _post [ 'Quality']);
}또 다른{
move_uploaded_file ($ _ files [ "xfile"] [ "tmp_name"], $ filename);
}
$ path = str_replace ( 'test.php', '', $ _server [ 'script_name']);
$ r-> filename = $ filename;
$ r-> path = $ 경로;
$ r-> img = '<img src = "'. $ path. $ filename. '" />';
echo json_encode ($ r);
함수 imageSize ($ source, $ 대상, $ width = 0, $ height = 0, $ crop = false, $ Quality = 80) {
$ 품질 = $ 품질? $ 품질 : 80;
$ image = imageCreateFromString ($ source);
if ($ image) {
// 치수를 얻습니다
$ w = imagesx ($ image);
$ h = imagesy ($ image);
if (($ width && $ w> $ width) || ($ height && $ h> $ height)) {
$ 비율 = $ w / $ h;
if (($ 비율> = 1 || $ height == 0) && $ width &&! $ crop) {
$ new_height = $ width / $ 비율;
$ new_width = $ 너비;
} elseif ($ crop && $ 비율 <= ($ width / $ height)) {
$ new_height = $ width / $ 비율;
$ new_width = $ 너비;
} 또 다른 {
$ new_width = $ height * $ 비율;
$ new_height = $ 높이;
}
} 또 다른 {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width *.5; // 수평 중간
$ y_mid = $ new_height *.5; // 수직 중간
// RESAMPLE
error_log ( 'height :'. $ new_height. ' - 너비 :'. $ new_width);
$ new = imageCreatetRueColor (라운드 ($ new_width), Round ($ new_height));
imageCopyResAmpled ($ new, $ image, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);
// 작물
if ($ crop) {
$ crop = imageCreatetRueColor ($ 너비? $ 너비 : $ new_width, $ 높이? $ 높이 : $ new_height);
imageEcopyresAmpled ($ crop, $ new, 0, 0, ($ x_mid- ($ width * .5)), 0, $ 너비, $ 높이, $ 너비, $ 높이);
// ($ y_mid- ($ height *.5))
}
// 출력
// 인터 렌징 활성화 [Progressive JPEG 용]
ImageInterlace ($ crup? $ crop : $ new, true);
$ dext = strtolower (pathinfo ($ destination, pathinfo_extension));
if ($ dext == '') {
$ dext = $ ext;
$ 대상. = '.' . $ ext;
}
스위치 ($ dext) {
사례 'JPEG':
사례 'jpg':
ImageJpeg ($ crup? $ crop : $ new, $ 대상, $ 품질);
부서지다;
사례 'png':
$ pngquality = ($ Quality -100) / 11.111111;
$ pngquality = Round (ABS ($ pngquality));
ImagePng ($ crup? $ crop : $ new, $ 대상, $ pngquality);
부서지다;
사례 'gif':
ImageGif ($ crop? $ crop : $ new, $ 대상);
부서지다;
}
@ImageStroy ($ image);
@ImageStroy ($ new);
@ImageStroy ($ crop);
}
}
PHP는 결국 JSON 형식 배열을 반환합니다. 내가 반환하는 정보는 IMG의 이미지 주소, 이름 및 HTML 코드입니다. 마지막으로, JSON 어레이는 JS에서 얻어지고 처리됩니다. 이 시점에서 작업이 끝났습니다.
기사가 시작될 때 파일 업로드 및 네트워크 사진을 선택하기 위해 클릭 하여이 두 가지 가이 주제의 범위 내에 있지 않기 때문에 이야기하지 않을 것이라고 언급했습니다. 게다가,이 두 기능은 구현하기에 어려운 것이 아닙니다.
데모 다운로드