Поскольку заголовок является примером, я не буду объяснять это время, потому что я также собрал этот пример. Я ссылался на 5 или 6 подключаемых плагинов и демонстраций, а затем выбрал лучшие из них, и, наконец, стал таким примером. Давайте посмотрим (адрес нельзя гарантировать, что он будет эффективным в течение длительного времени. Если он не удастся, пожалуйста, нажмите на демонстрацию в конце статьи, чтобы загрузить):
Я имею в виду веб -сайт иностранного фотоальбома. Изменения не так много, но стиль песни птицы преобразуется в китайский, а стиль загрузки также был изменен. Причина выбора этого заключается в том, что мне легко расширить. Он поддерживает три способа добавления изображений, один для загрузки перетаскивания, один для загрузки обычного файла, а другой - добавление сетевых изображений. Он умно объединяет три режима загрузки вместе, и вы можете просматривать браузер IE. Если HTML5 не поддерживается, не существует запроса загрузки изображений, как показано на рисунке:
Самая важная вещь в загрузке перетаскивания-это код детали JS, который реализует 70% функций, а остальные 30% просто представляют информацию об изображении на фоновый фон, а затем выполняет соответствующую обработку, такую как сжатие, обрезка и т. Д. Поэтому давайте сначала рассмотрим код реализации JS.
$ (). ready (function () {
if ($. Browser.safari || $ .browser.mozilla) {
$ ('#dtb-msg1 .cpatible'). 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);
});
// реализация функции
$ (документ) .on ({
Draglave: 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]);
} 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 = new xmlhttprequest ();
xhr.open ("post", "test.php", true);
xhr.setrequestheader ("x-requested-with", "xmlhttprequest");
xhr.upload.addeventListener ("Прогресс", функция (e) {
$ ("#dtb-msg3"). Hide ();
$ ("#dtb-msg4 span"). Show ();
$ ("#dtb-msg4"). Дети ('span'). EQ (1) .css ({width: '0px'});
$ ('. show'). html ('');
if (e.lengthcomputable) {
var загружен = math.ceil ((e.Loaded / e.total) * 100);
$ ("#dtb-msg4"). Дети ('span'). eq (1) .css ({width: (загружен*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);
предупреждение (result.filename);
$ ('. Show'). Append (result.img);
}, ЛОЖЬ);
var fd = new FormData ();
fd.append ('xfile', filelist [0]);
xhr.send (fd);
},ЛОЖЬ);
}еще{
$ ('#dtb-msg1 .cpatible'). hide ();
$ ('#dtb-msg1 .notcompatible'). Show ();
}
});
Сначала я сначала оценил тип браузера, потому что, как я только что представил, разные браузеры видят разные интерфейсы. Основная реализация кода начинается с реализации функции. Я не скажу много о том, почему это так, как он работает и каков принцип. Вы можете обратиться к этой статье: «Подробное объяснение перетаскивания и выпада на Home Page (HTML5 Drag & Drop, API FileReader, FormData)». Тем не менее, код в части загрузки Ajax все еще немного отличается, потому что Ренрен, кажется, немного неприятен, поэтому я найду другой способ.
Наконец, я загружаю часть кода PHP. Здесь я просто предоставлю ссылку, вы можете написать ее самостоятельно в соответствии с потребностями проекта.
$ r = new stdclass ();
Header ('Content-Type: Application/json');
$ maxsize = 10; // МБ
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 ('/image/i', $ _files ['xfile'] ['type'])) {
$ filename = $ _post ['value']? $ _Post ['value']: $ folder. sha1 (@microtime (). '-'. $ _files ['xfile'] ['name']). '.jpg';
}еще{
$ tld = split (',', $ _files ['xfile'] ['name']);
$ tld = $ tld [count ($ tld) - 1];
$ filename = $ _post ['value']? $ _Post ['value']: $ folder. sha1 (@microtime (). '-'. $ _files ['xfile'] ['name']). $ 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 ['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 = $ path;
$ r-> img = '<img src = "'. $ path. $ filename. '" />';
echo json_encode ($ r);
Function Imageresize ($ Source, $ destination, $ width = 0, $ height = 0, $ crop = false, $ Quality = 80) {
$ Quality = $ качество? $ качество: 80;
$ image = ImageCreateFromString ($ Source);
if ($ image) {
// Получить размеры
$ w = imagesx ($ image);
$ H = ImageSy ($ Image);
if (($ width && $ w> $ width) || ($ height && $ h> $ height)) {
$ catio = $ w / $ h;
if (($ cutio> = 1 || $ height == 0) && $ width &&! $ crop) {
$ new_height = $ width / $ cutio;
$ new_width = $ width;
} elseif ($ crop && $ catio <= ($ width / $ height)) {
$ new_height = $ width / $ cutio;
$ new_width = $ width;
} еще {
$ new_width = $ height * $ cutio;
$ new_height = $ height;
}
} еще {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width *.5; // горизонтальная средняя
$ y_mid = $ new_height *.5; // Вертикальная средняя
// Повторный выбор
error_log ('height:'. $ new_height. ' - ширина:'. $ new_width);
$ new = ImageCreateTrueColor (Round ($ new_width), Round ($ new_height));
ImageCopyresampled ($ new, $ image, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);
// Обрезать
if ($ crop) {
$ crop = ImageCreateTrueColor ($ width?
ImageCopyresampled ($ crop, $ new, 0, 0, ($ x_mid - ($ width * .5)), 0, $ width, $ hight, $ width, $ hight);
// ($ y_mid - ($ height *.5))
}
// Выход
// Включение интерпансинга [для прогрессивного JPEG]
ImageInterlace ($ Crop?
$ dext = strtolower (pathinfo ($ destination, pathinfo_extension));
if ($ dext == '') {
$ dext = $ ext;
$ destination. = '.' ' Полем $ EXT;
}
Switch ($ dext) {
Case 'jpeg':
Case 'JPG':
ImageJpeg ($ Crop?
перерыв;
case 'png':
$ pngquality = ($ качество - 100) / 11.111111;
$ pngquality = round (abs ($ pngquality));
ImagePng ($ crop?
перерыв;
Case 'Gif':
ImageGif ($ Crop?
перерыв;
}
@Imagedestroy ($ Image);
@Imagedestroy ($ new);
@Imagedestroy ($ crop);
}
}
PHP в конечном итоге вернет массив форматов JSON. Информация, которую я возвращаю, - это адрес изображения, имя и HTML -код IMG. Наконец, массив JSON получается на JS и обрабатывается. На этом этапе операция закончилась.
В начале статьи мы также упомянули, что мы также нажимаем, чтобы выбрать загрузку файлов и сетевые изображения, потому что эти два не находятся в рамках этой темы, поэтому мы не будем говорить о них. Кроме того, эти две функции не являются проблемными для реализации.
Демонстрация скачать