HTML5 ลากและวางตัวอย่างอัพโหลดตัวอย่างการสาธิตการสาธิต

เนื่องจากชื่อเป็นตัวอย่างฉันจะไม่อธิบายในครั้งนี้เพราะฉันได้รวมตัวอย่างนี้ไว้ด้วยกัน ฉันได้อ้างอิงปลั๊กอินและการด็อตการลากแล้วประมาณ 5 หรือ 6 ตัวแล้วหยิบสิ่งที่ดีที่สุดออกมาและในที่สุดก็กลายเป็นตัวอย่างเช่นนี้ ลองมาดูกัน (ที่อยู่ไม่สามารถรับประกันได้ว่าจะมีประสิทธิภาพเป็นเวลานานถ้ามันล้มเหลวโปรดคลิกที่การสาธิตในตอนท้ายของบทความเพื่อดาวน์โหลด):

ฉันอ้างถึงเว็บไซต์อัลบั้มภาพถ่ายต่างประเทศ การเปลี่ยนแปลงไม่มากนัก แต่รูปแบบของเพลงนกจะถูกแปลงเป็นภาษาจีนและรูปแบบการอัปโหลดก็เปลี่ยนไปเช่นกัน เหตุผลในการเลือกสิ่งนี้คือมันง่ายสำหรับฉันที่จะขยาย รองรับสามวิธีในการเพิ่มรูปภาพหนึ่งรายการเพื่ออัปโหลดการลากและวางหนึ่งรายการเพื่ออัปโหลดไฟล์ปกติและอีกวิธีหนึ่งคือการเพิ่มรูปภาพเครือข่าย มันรวมโหมดการอัปโหลดสามโหมดเข้าด้วยกันอย่างชาญฉลาดและคุณสามารถเรียกดูกับเบราว์เซอร์ IE หากไม่รองรับ HTML5 จะไม่มีการแจ้งให้อัปโหลดรูปภาพดังที่แสดงในรูปภาพ:

สิ่งที่สำคัญที่สุดเกี่ยวกับการอัปโหลดแบบลากและวางคือรหัสชิ้นส่วน JS ซึ่งใช้ฟังก์ชั่น 70% และอีก 30% เพียงแค่ส่งข้อมูลภาพไปยังพื้นหลังจากนั้นการประมวลผลที่สอดคล้องกันเช่นการบีบอัดการครอบตัด ฯลฯ ลองดูรหัสการใช้งาน JS ก่อน

$ (). พร้อม (ฟังก์ชั่น () {

if ($. browser.safari || $. browser.mozilla) {

$ ('#dtb-msg1 .Compatible'). show ();

$ ('#DTB-MSG1 .notCompatible'). ซ่อน ();

$ ('#drop_zone_home'). hover (function () {

$ (นี่) ..children ('p'). stop (). animate ({top: '0px'}, 200);

},การทำงาน(){

$ (นี่) .children ('p'). หยุด (). animate ({top: '-44px'}, 200);

-

// การใช้งานฟังก์ชั่น

$ (เอกสาร) .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');

กลับ;

-

// ตรวจพบว่าไฟล์เป็นรูปภาพหรือไม่

if (fileList [0] .type.indexof ('image') === -1) {

$ ('. dashboard_target_box'). RemoveClass ('over');

กลับ;

-

if ($. browser.safari) {

// chrome8+

img.src = window.webkiturl.createObjecturl (filelist [0]);

} อื่นถ้า ($. 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 ("โพสต์", "test.php", จริง);

XHR.SetRequestheader ("X-requested-with", "XMLHTTTPREQUEST");

xhr.upload.addeventListener ("ความคืบหน้า", ฟังก์ชั่น (e) {

$ ("#DTB-MSG3"). ซ่อน ();

$ ("#DTB-MSG4 Span"). show ();

$ ("#dtb-msg4"). เด็ก ๆ ('span'). eq (1) .css ({width: '0px'});

$ ('. show'). html ('');

ถ้า (E.LengthComputable) {

var loaded = math.ceil ((e.loaded / e.total) * 100);

$ ("#dtb-msg4"). เด็ก ๆ ('span'). eq (1) .css ({width: (โหลด*2)+'px'});

-

}, เท็จ);

xhr.addeventListener ("โหลด", ฟังก์ชั่น (e) {

$ ('. dashboard_target_box'). RemoveClass ('over');

$ ("#DTB-MSG3"). show ();

$ ("#DTB-MSG4 Span"). ซ่อน ();

var result = jQuery.parsejson (e.target.responsetext);

การแจ้งเตือน (result.filename);

$ ('. show'). ผนวก (result.img);

}, เท็จ);

var fd = new FormData ();

fd.Append ('xfile', fileList [0]);

XHR.Send (FD);

},เท็จ);

}อื่น{

$ ('#DTB-MSG1 .Compatible'). ซ่อน ();

$ ('#dtb-msg1 .notCompatible'). show ();

-

-

ตอนแรกฉันตัดสินประเภทเบราว์เซอร์เป็นครั้งแรกเพราะเมื่อฉันเพิ่งแนะนำเบราว์เซอร์ที่แตกต่างกันจะเห็นอินเทอร์เฟซที่แตกต่างกัน การใช้งานหลักของรหัสเริ่มต้นด้วยการใช้งานฟังก์ชั่น ฉันจะไม่พูดมากเกี่ยวกับสาเหตุที่มันเป็นวิธีการทำงานและหลักการคืออะไร คุณสามารถอ้างถึงบทความนี้: "คำอธิบายโดยละเอียดเกี่ยวกับการลากและดร็อปอัปโหลดในหน้าแรกของ Renren (HTML5 Drag & Drop, Filereader API, FormData)" อย่างไรก็ตามรหัสในส่วนอัพโหลด Ajax ยังคงแตกต่างกันเล็กน้อยเนื่องจาก Renren ดูเหมือนจะลำบากเล็กน้อยดังนั้นฉันจะหาวิธีอื่น

ในที่สุดฉันกำลังอัปโหลดส่วนหนึ่งของรหัส PHP ที่นี่ฉันเพิ่งให้ข้อมูลอ้างอิงคุณสามารถเขียนด้วยตัวเองตามความต้องการของโครงการ

$ r = ใหม่ stdclass ();

ส่วนหัว ('เนื้อหาประเภท: แอปพลิเคชัน/json');

$ maxsize = 10; // mb

ถ้า ($ _ files ['xfile'] ['size']> ($ maxsize * 1048576)) {

$ r-> error = "ขนาดภาพไม่เกิน $ maxsize mb";

-

$ folder = 'ไฟล์/';

if (! is_dir ($ folder)) {

mkdir ($ โฟลเดอร์);

-

$ โฟลเดอร์ = $ _post ['โฟลเดอร์']? $ _post ['โฟลเดอร์'] -

if (! is_dir ($ folder)) {

mkdir ($ โฟลเดอร์);

-

if (preg_match ('/image/i', $ _files ['xfile'] ['type'])) {

$ filename = $ _post ['value']? $ _post ['value']: $ โฟลเดอร์ sha1 (@microtime (). '-'. $ _files ['xfile'] ['ชื่อ']) '.jpg';

}อื่น{

$ tld = split (',', $ _files ['xfile'] ['name']);

$ tld = $ tld [count ($ tld) - 1];

$ filename = $ _post ['value']? $ _post ['value']: $ โฟลเดอร์ sha1 (@microtime (). '-'. $ _files ['xfile'] ['ชื่อ']) $ tld;

-

$ types = 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 ['ความสูง'], $ _post ['crop'], $ _post ['คุณภาพ']);

}อื่น{

move_uploaded_file ($ _ files ["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);

ฟังก์ชั่น imageResize ($ แหล่งที่มา, $ ปลายทาง, $ 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)) {

$ ratio = $ w / $ h;

if ((($ ratio> = 1 || $ height == 0) && $ width &&! $ crop) {

$ new_height = $ width / $ ratio;

$ new_width = $ width;

} elseif ($ crop && $ ratio <= ($ width / $ height)) {

$ new_height = $ width / $ ratio;

$ new_width = $ width;

} อื่น {

$ new_width = $ height * $ ratio;

$ new_height = $ height;

-

} อื่น {

$ new_width = $ w;

$ new_height = $ h;

-

$ x_mid = $ new_width *.5; // กลางแนวนอน

$ y_mid = $ new_height *.5; // แนวตั้งตรงกลาง

// resample

ERROR_LOG ('ความสูง:'. $ new_height. ' - ความกว้าง:'. $ new_width);

$ new = imageCreateTretRuecolor (รอบ ($ new_width), รอบ ($ new_height));

ImageCopyresampled ($ ใหม่, $ image, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);

// พืชผล

ถ้า ($ crop) {

$ crop = imageCreateTretRuecolor ($ width? $ width: $ new_width, $ height? $ height: $ new_height);

ImageCopyresampled ($ crop, $ ใหม่, 0, 0, ($ x_mid - ($ width * .5)), 0, $ width, $ ความสูง, $ width, $ ความสูง);

// ($ y_mid - ($ height *.5))

-

// เอาต์พุต

// เปิดใช้งาน Interlancing [สำหรับ JPEG แบบก้าวหน้า]

ImageInterlace ($ crop? $ crop: $ ใหม่จริง);

$ dext = strtoLower (pathinfo ($ ปลายทาง, pathinfo_extension));

ถ้า ($ dext == '') {

$ dext = $ ext;

$ ปลายทาง. = '.' - $ ext;

-

สวิตช์ ($ dext) {

กรณี 'jpeg':

กรณี 'JPG':

ImageJpeg ($ crop? $ crop: $ ใหม่, $ ปลายทาง, $ คุณภาพ);

หยุดพัก;

กรณี 'png':

$ pngquality = ($ คุณภาพ - 100) / 11.111111;

$ pngquality = Round (ABS ($ pngquality));

Imagepng ($ crop? $ crop: $ ใหม่, $ ปลายทาง, $ pngquality);

หยุดพัก;

กรณี 'gif':

ImageGif ($ crop? $ crop: $ ใหม่, $ ปลายทาง);

หยุดพัก;

-

@imagedestroy ($ image);

@imagedestroy ($ ใหม่);

@imagedestroy ($ crop);

-

-

ในที่สุด PHP จะส่งคืนอาร์เรย์รูปแบบ JSON ข้อมูลที่ฉันส่งคืนคือที่อยู่รูปภาพชื่อและรหัส HTML ของ IMG ในที่สุดอาร์เรย์ JSON จะได้รับใน JS และประมวลผล ณ จุดนี้การดำเนินการสิ้นสุดลง

ที่จุดเริ่มต้นของบทความเรายังกล่าวอีกว่าเราคลิกเพื่อเลือกการอัปโหลดไฟล์และรูปภาพเครือข่ายเนื่องจากทั้งสองไม่อยู่ในขอบเขตของหัวข้อนี้ดังนั้นเราจะไม่พูดถึงพวกเขา นอกจากนี้ฟังก์ชั่นทั้งสองนี้ไม่ยากที่จะนำไปใช้

ดาวน์โหลดตัวอย่าง