Hospedagem automática de JPG a partir de funções PHP e Javascript

Não manjo muito de Javascript, mas quando eu precisei realizar um upload de imagem via Ajax eu utilizei o Formdata.

Esse link também pode te ajudar https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery

A verificação e tratamento do MIME type, tamanho, dimensões, nome da imagem etc eu sugiro realizar no lado do servidor, ou seja, pelo PHP. Dessa forma você possui mais liberdade e controle pra realizar essas verificações e tratamentos devido ao suporte da linguagem, além de não deixar visível pro usuário suas regras de negócio e proteger seu servidor :)

O que você quer fazer é exatamente o que fiz para upload de avatares dos usuários em um site.

Então vou só mostrar os códigos (Tudo mastigado). Pois fica mais fácil dar Ctrl+C e Ctrl+V do que explicar tudo ^^

É só você editar e adaptar para suas necessidades.

Html (Esse é o arquivo para envio)

Spoiler

<?php
require_once (__DIR__ . '\\..\\..\\system\\runtime.php');

if (isset($session->isLogin)) {

 ?>
 <script type="text/javascript">
 divShow('.btn-close-modal');
 $(document).ready(function () {
 $('.avatar-uploader').on('dragover', function (e) {
 e.stopPropagation();
 e.preventDefault();
 $(this).css({'border': '3px solid #0f990f', 'color': '#0f990f'});
 });
 $('.avatar-uploader').on('dragleave', function (e) {
 e.stopPropagation();
 e.preventDefault();
 $(this).css({'border': '3px dotted #dadada', 'color': '#7f7f7f'});
 });

 $('.avatar-uploader').on('drop', function (e) {
 e.stopPropagation();
 e.preventDefault();
 $(this).css({'border': '3px dotted #ff0000', 'color': '#ff0000'});

 var files = e.originalEvent.dataTransfer.files;
 var file = files[0];
 if (files[1]) {
 return false;
 } else {
 upload(file);
 }
 });
 $('.sendAvatar').on("change", function (e) {
 var files = e.originalEvent.target.files;
 var file = files[0];
 upload(file);
 });

 });
 </script>
 <div class="padding-all center-text">
 <div class="avatar-uploader padding-all gray">
 <p><i class="fa fa-camera-retro fa-6x"></i></p>
 <p><small><i>Você pode arrastar e soltar a imagem aqui</i></small></p>
 <p><small><i>Imagens maiores que 240X240 pixels serão redimencionadas</i></small></p>
 <br>
 <form class="margin-all" action="" method="post" enctype="multipart/form-data">
 <label class="btn-submit sendAvatar">Selecionar Arquivo <i class="fa fa-upload"></i>
 <input type="file" class="sendAvatar">
 </label>
 </form>
 <div class="invalidimg red" style="font-weight: bold"></div>
 </div>
 </div>
 <?php

} else {

 ?>
 <div class="center-text red padding-all">
 <i class="fa fa-eye-slash fa-4x"></i>
 <p>Acesso não autorizado</p>
 <br>
 <a href="?page=home" class="btn-submit-danger" onclick="return mainLink(this.href);"><i class="fa fa-home"></i> Página Inicial </a>
 </div>
 <?php
}

  

	 

	Função com jQuery para formulário

 Spoiler

/******************************************************************
* @function : Envio do formulário para upload de Avatar
* @param file : Instância o protocolo de recebimento do arquivo
*****************************************************************/

function upload(file) {
 var loading = "<center><img src=\"./lib/images/loading.svg\" class=\"loading\"></center>";
 var name = file.name;
 var ext = name.substr(name.lastIndexOf(".") + 1).toLowerCase();

 if (ext == 'jpg' || ext == 'jpeg' || ext == 'pjpeg' || ext == 'png' || ext == 'png' || ext == 'x-png') {
 var formdata = new FormData();
 formdata.append('file', file);

 $.ajax({
 method: 'POST',
 url: './system/modules/useredit/sendavatar_v.php',
 contentType: false,
 processData: false,
 dataType: 'html',
 data: formdata,
 beforeSend: function () {
 $('.btn-close-modal').hide();
 $('.modalLoad').html(loading);
 },
 complete: function () {
 $(loading).remove();
 },
 success: function (data) {
 $('.modalLoad').html(data);
 }
 });
 } else {
 $('.invalidimg').html('Envie somente imagens!<br> .jpg / .jpeg / .pjpeg / .png / .png / .x-png');
 }
}

  

	 

	Não se esqueça de adicionar isso ao comportamento original do javascript

 Spoiler

 $('form').submit(function () {
 return false;
 });

  

	 

	Arquivo PHP que receberá os dados e faz a instância da classe de envio no caso "sendavatar_v.php"

 Spoiler

<?php
require_once (__DIR__ . '\\..\\..\\runtime.php');
$tmpName = $_FILES['file'];

try {
if (empty($tmpName)) {

 throw new returnEx('Acesso inválido', returnEx::INVALID_ACESS);
 } else if (!isset($session->isLogin)) {
 throw new returnEx('Acesso inválido', returnEx::INVALID_ACESS);
 } else {
 $upload = new imageUpload();
 $upload->sendImage($tmpName, $session->userData->userid);
 if ($upload->setResult()) {
 ?>
 <script type="text/javascript">
 closeModal('reloadAll');
 tmpMsg('Imagem pessoal modificada');
 </script>
 <?php
 } else {
 throw new returnEx('Erro ao certificar arquivo!', returnEx::SYSTEM_ERROR);
 }
 }

} catch (returnEx $ex) {
switch ($ex->getCode()) {
case returnEx::INVALID_ACESS:

 ?>
 <div class="center-text padding-all red">
 <i class="fa fa-warning fa-3x"></i>
 <p><b><?= $ex->getMessage(); ?></b></p>
 </div>
 <script type="text/javascript">divShow('.close-modal-reload-all');</script>
 <?php
 break;
 case returnEx::SYSTEM_ERROR:
 ?>
 <div class="center-text padding-all red">
 <i class="fa fa-warning fa-3x"></i>
 <p><b><?= $ex->getMessage(); ?></b></p>
 <p>Tente novamente mais tarde.</p>
 </div>
 <script type="text/javascript">divShow('.close-modal-reload-home');</script>
 <?php
 break;
 default:
 ?>
 <div class="center-text padding-all red">
 <i class="fa fa-warning fa-3x"></i>
 <p><b>Erro crítico no sistema!</b></p>
 </div>
 <script type="text/javascript">divShow('.close-modal-reload-all');</script>
 <?php
 break;
 }
}

  

	 

	A classe de Upload você encontra aqui:

	 

	Funciona da seguinte forma:

	No momento que o arquivo é selecionado ou "arrastado e soltado" a imagem é enviada.