Мини AJAX форма для загрузки файлов
HTML
Как обычно, мы начнем с основного документа HTML5:
В заголовке документа, я включил два шрифта Google Webfonts, и перед закрывающим тегом тега вы можете видеть ряд библиотек JavaScript. Это JQuery библиотека, jQuery Knob и jQuery File Upload plugin.
Основной элемент на странице, является #upload form. Внутри это #drop div и неупорядоченный список. Этот список будет содержать пункты li для каждого из переданных файлов. Вы можете увидеть разметку, созданную для загрузки файла ниже:
Входной элемент в приведенном выше отрывке скрыт с помощью CSS. Его единственное назначение состоит в инициализации jQuery Knob plugin. Поле ввода имеет ряд атрибутов data-* , которые изменяют внешний вид Knob плагина.
JQuery код
Есть два способа загрузки файлов при помощи этой формы:
1) Это перетаскивание файлов с рабочего стола в окно формы (во всех браузерах, кроме IE);
2) Нажав на кнопку Обзор. Это будет имитировать нажатие на скрытые входной файл.
Обратите внимание, что входной файл имеет несколько наборов параметров, что позволит загружать более одного файла.
jQuery File Upload библиотека работает с JQuery UI, для создания дизайна, которые можно использовать прямо сейчас. Тем не менее, потому что нам нужно полностью создать пользовательский интерфейс, мы будем использовать базовую версию плагина, который не включает в себя сам интерфейс. Чтобы заставить его работать, мы проходим ряд опций. В приведенном выше примере, а именно:
dropZone – Это свойство содержит JQuery селектор элемента, который будет выступать в качестве перетаскивания.
add – Эта функция обратного вызова вызывается при добавлении файла в очередь. Внутри него, мы создаем HTML разметку, которая будет представлять файлы, добавить его в UL и вызвать data.submit() метод.
progress – Этот обратный вызов выполняется с помощью плагина каждые 100 мс (настраивается). Второй аргумент (данные атрибутов) содержит размер файла и сколько байт было передано. Это позволяет рассчитать процент, а затем обновить скрытый элемент input, который в свою очередь, обновляет knob.
fail – Эта функция обратного вызова выполняется, если есть проблема с вашими PHP скриптом.
PHP скрипт
jQuery File Upload также поставляется с мощным PHP скриптом для обработки и загрузки файлов, которые вы можете поставить на свой сервер, но для этого урока, мы будем строить нашу собственную.
Как я уже говорил дальше, хотя мы можем выбрать кучу файлов сразу, они будут загружены по одному. Это делает его еще проще в обращении их с нашими PHP скриптом. В настоящее время файлы просто помещаются в папку добавления, но вы можете расширить его, добавив проверку подлинности или создания записей в базе данных.
Все готово!
Я надеюсь, что вы найдете применение нашему уроку!
Как обычно, мы начнем с основного документа HTML5:
Код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mini AJAX форма для загрузки файлов</title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet'>
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
Перетащите сюда
<a>Просмотр</a>
<input type="file" name="upl" multiple>
</div>
<ul>
</ul>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Mini AJAX форма для загрузки файлов</title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet'>
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
Перетащите сюда
<a>Просмотр</a>
<input type="file" name="upl" multiple>
</div>
<ul>
</ul>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
В заголовке документа, я включил два шрифта Google Webfonts, и перед закрывающим тегом тега вы можете видеть ряд библиотек JavaScript. Это JQuery библиотека, jQuery Knob и jQuery File Upload plugin.
Основной элемент на странице, является #upload form. Внутри это #drop div и неупорядоченный список. Этот список будет содержать пункты li для каждого из переданных файлов. Вы можете увидеть разметку, созданную для загрузки файла ниже:
Код
<li class="working">
<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />
<p>Sunset.jpg <i>145 KB</i></p>
<span></span>
</li>
<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />
<p>Sunset.jpg <i>145 KB</i></p>
<span></span>
</li>
Входной элемент в приведенном выше отрывке скрыт с помощью CSS. Его единственное назначение состоит в инициализации jQuery Knob plugin. Поле ввода имеет ряд атрибутов data-* , которые изменяют внешний вид Knob плагина.
JQuery код
Есть два способа загрузки файлов при помощи этой формы:
1) Это перетаскивание файлов с рабочего стола в окно формы (во всех браузерах, кроме IE);
2) Нажав на кнопку Обзор. Это будет имитировать нажатие на скрытые входной файл.
Обратите внимание, что входной файл имеет несколько наборов параметров, что позволит загружать более одного файла.
Код
$(function(){
var ul = $('#upload ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
var ul = $('#upload ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
jQuery File Upload библиотека работает с JQuery UI, для создания дизайна, которые можно использовать прямо сейчас. Тем не менее, потому что нам нужно полностью создать пользовательский интерфейс, мы будем использовать базовую версию плагина, который не включает в себя сам интерфейс. Чтобы заставить его работать, мы проходим ряд опций. В приведенном выше примере, а именно:
dropZone – Это свойство содержит JQuery селектор элемента, который будет выступать в качестве перетаскивания.
add – Эта функция обратного вызова вызывается при добавлении файла в очередь. Внутри него, мы создаем HTML разметку, которая будет представлять файлы, добавить его в UL и вызвать data.submit() метод.
progress – Этот обратный вызов выполняется с помощью плагина каждые 100 мс (настраивается). Второй аргумент (данные атрибутов) содержит размер файла и сколько байт было передано. Это позволяет рассчитать процент, а затем обновить скрытый элемент input, который в свою очередь, обновляет knob.
fail – Эта функция обратного вызова выполняется, если есть проблема с вашими PHP скриптом.
PHP скрипт
jQuery File Upload также поставляется с мощным PHP скриптом для обработки и загрузки файлов, которые вы можете поставить на свой сервер, но для этого урока, мы будем строить нашу собственную.
Код
<?php
$allowed = array('png', 'jpg', 'gif','zip');
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
echo '{"status":"success"}';
exit;
}
}
echo '{"status":"error"}';
exit;
$allowed = array('png', 'jpg', 'gif','zip');
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
echo '{"status":"success"}';
exit;
}
}
echo '{"status":"error"}';
exit;
Как я уже говорил дальше, хотя мы можем выбрать кучу файлов сразу, они будут загружены по одному. Это делает его еще проще в обращении их с нашими PHP скриптом. В настоящее время файлы просто помещаются в папку добавления, но вы можете расширить его, добавив проверку подлинности или создания записей в базе данных.
Все готово!
Я надеюсь, что вы найдете применение нашему уроку!
-
FalleN -
3682 -
1 -
280
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...