Статьи

Показать миниатюру загрузки изображений AJAX / PHP

Ноябрь 15, 2018

ajax-image-upload

Обновление 18/11/2012: новая версия этой загрузки теперь здесь JQUERY AJAX IMAGE ЗАГРУЗИТЬ ПРИМЕР THUMBNAIL .

Таким образом, вы можете добавить в свои формы инструмент для загрузки файлов / изображений, и AJAX сохранит файл с помощью PHP и вернет пользователю версию с уменьшенным наклоном для отображения в форме. Ницца.

Как это устроено

  1. Пользователь выбирает файл / изображение из поля ввода формы
  2. jQuery отправляет запрос AJAX с файлом / изображением
  3. PHP создает уменьшенную версию и отправляет обратно URL в формате JSON
  4. jQuery отображает версию с уменьшенным размером в форме

Скачать

  • doajaxfileupload.php
  • ajaxfileupload.php
  • jquery.php
  • Форма-html.php

Скачать исходные файлы Посмотреть Live Demo

Код jQuery — jquery.js 

/******************************************************************* JS - PREVIEW IMAGE *******************************************************************/ function previewImage(str) { //alert(str); ajaxFileUpload(); } function removeImage() { //alert("Image Removed"); $("#imagethumb").html(''); $("#removebutton").hide(); $("#supportedfiles").show(); var tid = $("Input[name=allocatedimagename]").val(); //remove the temporary image files created by the image $.get("/php/deleteblogthumb.php",{thumb_name: tid, type: 'js-blog'}, function(data){ //alert(data); }); $("Input[name=allocatedimagename]").val(''); $("Input[name=blogpic]").val(''); } function ajaxFileUpload() { //starting setting some animation when the ajax starts and completes $("#loading") .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); }); /* prepareing ajax file upload url: the url of script file handling the uploaded files fileElementId: the file type of input element id and it will be the index of $_FILES Array() dataType: it support json, xml secureuri:use secure protocol success: call back function when the ajax complete error: callback function when the ajax failed */ $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'blogpic', dataType: 'json', success: function (data, status) { if(typeof(data.error) != 'undefined') { if(data.error != '') { alert(data.error); }else { //alert(data.loc); //show the preview of image var imageloc = ' Your uploaded image: '+data.name+'('+data.size+'kb)'+'   '; $("#imagethumb").html(imageloc); //add $("#removebutton").show(); $("#supportedfiles").hide(); //save the allocated image name for use with the process signup script $("Input[name=allocatedimagename]").val(data.loc); } } }, error: function (data, status, e) { alert(e); } } ) return false; }

Код jQuery — ajaxfileupload.js 

 jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement(' '); if(typeof uri== 'boolean'){ io.src = 'javascript:false'; } else if(typeof uri== 'string'){ io.src = uri; } } else { var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendChild(io); return io }, createUploadForm: function(id, fileElementId) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = $(' jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement(' '); if(typeof uri== 'boolean'){ io.src = 'javascript:false'; } else if(typeof uri== 'string'){ io.src = uri; } } else { var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendChild(io); return io }, createUploadForm: function(id, fileElementId) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = $('

«);
var oldElement = $ (‘#’ + fileElementId);
var newElement = $ (oldElement) .clone ();
$ (oldElement) .attr (‘id’, fileId);
$ (OldElement) .before (newElement);
$ (OldElement) .appendTo (форма);
// установить атрибуты
$ (form) .css (‘position’, ‘absolute’);
$ (form) .css (‘top’, ‘-1200px’);
$ (form) .css (‘left’, ‘-1200px’);
$ (Форма) .appendTo ( ‘тело’);
форма возврата;
},

ajaxFileUpload: function (s) {
// TODO вводит глобальные настройки, позволяя клиенту изменять их для всех запросов, а не только для тайм-аута
s = jQuery.extend ({}, jQuery.ajaxSettings, s);
var id = new Date (). getTime ()
var form = jQuery.createUploadForm (id, s.fileElementId);
var io = jQuery.createUploadIframe (id, s.secureuri);
var frameId = ‘jUploadFrame’ + id;
var formId = ‘jUploadForm’ + id;
// Следим за новым набором запросов
if (s.global &&! jQuery.active ++)
{
jQuery.event.trigger («ajaxStart»);
}
var requestDone = false;
// Создать объект запроса
var xml = {}
если (с.глобал)
jQuery.event.trigger («ajaxSend», [xml, s]);
// Ждем ответа, чтобы вернуться
var uploadCallback = function (isTimeout)
{
var io = document.getElementById (frameId);
пытаться
{
если (io.contentWindow)
{
xml.responseText = io.contentWindow.document.body? io.contentWindow.document.body.innerHTML: null;
xml.responseXML = io.contentWindow.document.XMLDocument? io.contentWindow.document.XMLDocument: io.contentWindow.document;

} else if (io.contentDocument)
{
xml.responseText = io.contentDocument.document.body? io.contentDocument.document.body.innerHTML: null;
xml.responseXML = io.contentDocument.document.XMLDocument? io.contentDocument.document.XMLDocument: io.contentDocument.document;
}
} Поймать (е)
{
jQuery.handleError (s, xml, null, e);
}
if (xml || isTimeout == «timeout»)
{
requestDone = true;
статус вар;
пытаться {
status = isTimeout! = «timeout»? «успех»: «ошибка»;
// Убедитесь, что запрос был успешным или не изменен
if (status! = «Ошибка»)
{
// обрабатываем данные (запускает xml через httpData независимо от обратного вызова)
var data = jQuery.uploadHttpData (xml, s.dataType);
// Если был указан локальный обратный вызов, запустить его и передать данные
если (s.success)
s.success (данные, статус);

// Запускаем глобальный обратный вызов
если (с.глобал)
jQuery.event.trigger («ajaxSuccess», [xml, s]);
} еще
jQuery.handleError (s, xml, status);
} catch (e)
{
статус = «ошибка»;
jQuery.handleError (s, xml, status, e);
}

// Запрос был выполнен
если (с.глобал)
jQuery.event.trigger («ajaxComplete», [xml, s]);

// Обработка глобального счетчика AJAX
если (s.global &&! —jQuery.active)
jQuery.event.trigger («ajaxStop»);

// Обработка результата
если (s.complete)
s.complete (xml, статус);

JQuery (ИО) .unbind ()

SetTimeout (функция ()
{ пытаться
{
$ (-Й) .remove ();
$ (Форма) .remove ();

} catch (e)
{
jQuery.handleError (s, xml, null, e);
}

}, 100)

xml = null

}
}
// Тайм-аут проверки
if (s.timeout> 0)
{
SetTimeout (функция () {
// Проверяем, происходит ли запрос
if (! requestDone) uploadCallback («timeout»);
}, s.timeout);
}
пытаться
{
// var io = $ (‘#’ + frameId);
var form = $ (‘#’ + formId);
$ (form) .attr (‘action’, s.url);
$ (form) .attr (‘method’, ‘POST’);
$ (form) .attr (‘target’, frameId);
если (form.encoding)
{
form.encoding = ‘multipart / form-data’;
}
еще
{
form.enctype = ‘multipart / form-data’;
}
$ (Форма) .submit ();

} catch (e)
{
jQuery.handleError (s, xml, null, e);
}
если (window.attachEvent) {
document.getElementById (frameId) .attachEvent (‘onload’, uploadCallback);
}
еще {
document.getElementById (frameId) .addEventListener (‘load’, uploadCallback, false);
}
return {abort: function () {}};

},

uploadHttpData: function (r, type) {
var data =! type;
data = type == «xml» || данные ? r.responseXML: r.responseText;
// Если тип «скрипт», оцените его в глобальном контексте
if (type == «script»)
jQuery.globalEval (data);
// Получить объект JavaScript, если используется JSON.
if (type == «json»)
eval («данные =» + данные);
// оцениваем скрипты в html
if (type == «html»)
JQuery (»

«) .Html (данные) .evalScripts ();
// alert ($ (‘param’, data) .each (function () {alert ($ (this) .attr (‘value’));}));
вернуть данные;
}
})

Код PHP — doajaxfileupload.php 

 $ratio2) { $thumb_w=$new_w; $thumb_h=$old_y/$ratio1; } else { $thumb_h=$new_h; $thumb_w=$old_x/$ratio2; } // we create a new image with the new dimmensions $dst_img=ImageCreateTrueColor($thumb_w,$thumb_h); // resize the big image to the new created one imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); // output the created image to the file. Now we will have the thumbnail into the file named by $filename if(!strcmp("png",$ext)) imagepng($dst_img,$filename); else imagejpeg($dst_img,$filename); //destroys source and destination images. imagedestroy($dst_img); imagedestroy($src_img); } // This function reads the extension of the file. // It is used to determine if the file is an image by checking the extension. function getExtension($str) { $i = strrpos($str,"."); if (!$i) { return ""; } $l = strlen($str) - $i; $ext = substr($str,$i+1,$l); return $ext; } //reads the name of the file the user submitted for uploading $image=$_FILES[$fileElementName]['name']; // if it is not empty if ($image) { // get the original name of the file from the clients machine $filename = stripslashes($_FILES[$fileElementName]['name']); // get the extension of the file in a lower case format $extension = getExtension($filename); $extension = strtolower($extension); // if it is not a known extension, we will suppose it is an error, print an error message //and will not upload the file, otherwise we continue if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png")) { $error .= 'Unknown extension!'; $errors=1; } else { // get the size of the image in bytes // $_FILES['image']['tmp_name'] is the temporary filename of the file in which //the uploaded file was stored on the server $size=getimagesize($_FILES[$fileElementName]['tmp_name']); $sizekb=filesize($_FILES[$fileElementName]['tmp_name']); //compare the size with the maxim size we defined and print error if bigger if ($sizekb > MAX_SIZE*1024) { $error .= 'You have exceeded the size limit!'; $errors=1; } else { //we will give an unique name, for example the time in unix time format $image_name=time().'.'.$extension; //the new name will be containing the full path where will be stored (images folder) $newname="/images/masters/".$image_name; $copied = copy($_FILES[$fileElementName]['tmp_name'], $newname); //we verify if the image has been uploaded, and print error instead if (!$copied) { $error .= 'Copy unsuccessfull!'; $errors=1; } else { // the new thumbnail image will be placed in images/thumbs/ folder $thumb_name='/images/thumbs/thumb_'.$image_name; // call the function that will create the thumbnail. The function will get as parameters //the image name, the thumbnail name and the width and height desired for the thumbnail $thumb=make_thumb($newname,$thumb_name,40,40); //also add the users pic $thumb_name='/images/thumbs/thumb_'.$image_name; $thumb=make_thumb($newname,$thumb_name,110,110); }} } } //--------- END SECOND SCRIPT -------------------------------------------------------------------- //return variables to javascript $filename = $_FILES[$fileElementName]['name']; $filesize = round(($sizekb/1000), 0); $fileloc = $thumb_name; //for security reason, we force to remove all uploaded file @unlink($_FILES[$fileElementName]); } $return_JSON = ""; $return_JSON .= "{"; $return_JSON .= "error: '" . $error . "',n"; $return_JSON .= "name: '" . $filename . "',n"; $return_JSON .= "size: '" . $filesize . "',n"; $return_JSON .= "loc: '" . $fileloc . "'n"; $return_JSON .= "}"; echo $return_JSON; ?>

HTML-код 

 Blog Thumbnail Picture:
37
Share: