Has anyone managed to use jQuery File Upload yet?

Question

I refer to this link http://blueimp.github.io/jQuery-File-Upload/. The documentation is very vague. I have already changed the "action" of the "form" but without success. Form Html5:

<form id="fileupload" action="bloco_img_upload.php" method="POST" enctype="multipart/form-data">
              <!-- Redirect browsers with JavaScript disabled to the origin page -->
              <noscript><input type="hidden" name="redirect" value="bloco_img_upload.php"></noscript>
              <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
              <div class="row fileupload-buttonbar">
                  <div class="col-lg-7">
                      <!-- The fileinput-button span is used to style the file input field as button -->
                      <span class="btn btn-success fileinput-button">
                          <i class="glyphicon glyphicon-plus"></i>
                          <span>Add arquivos</span>
                          <input type="file" name="files[]" multiple>
                      </span>
                      <button type="submit" class="btn btn-primary start">
                          <i class="glyphicon glyphicon-upload"></i>
                          <span>Iniciar envio</span>
                      </button>
                      <button type="reset" class="btn btn-warning cancel">
                          <i class="glyphicon glyphicon-ban-circle"></i>
                          <span>Cancelar envio</span>
                      </button>
                      <button type="button" class="btn btn-danger delete">
                          <i class="glyphicon glyphicon-trash"></i>
                          <span>Excluir</span>
                      </button>
                      <input type="checkbox" class="toggle">
                      <!-- The global file processing state -->
                      <span class="fileupload-process"></span>
                  </div>
                  <!-- The global progress state -->
                  <div class="col-lg-5 fileupload-progress fade">
                      <!-- The global progress bar -->
                      <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                      </div>
                      <!-- The extended global progress state -->
                      <div class="progress-extended">&nbsp;</div>
                  </div>
              </div>
              <!-- The table listing the files available for upload/download -->
              <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
          </form>

bloco_img_upload.php

<?php
include("arq_pro.php");
include("../arq_fun.php");
include("redimagens.php");

$SqlMini=mysql_query("SELECT LarMinImg,AltMinImg FROM dados_config WHERE Emp=$EmpPess32 AND Bloco=$IdBloco32;");
list($LarMini,$AltMini)=mysql_fetch_row($SqlMini);

$targetFolder="imgclientes/".$EmpUrl1."/";
$verifyToken = md5('unique_salt' . $_POST['timestamp']);

$ContNot=0;
for($i = 0; $i < count($_POST["files"]); $i++) {
if (!empty($_FILES) && $_POST['token'] == $verifyToken){
    $tempFile = $_FILES['files']['tmp_name'][$i];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['files']['name'][$i];

    $fileTypes = array('jpg','jpeg','gif','png');
    $fileParts = pathinfo($_FILES['files']['name'][$i]);

    if (in_array($fileParts['extension'],$fileTypes)) {
        preg_match("/\.(gif|bmp|png|jpg|jpeg){1}$/i", $_FILES['files']["name"][$i], $ext);
        $ImgNome = md5(uniqid(time())) . "." . $ext[1];
        $ImgDir = "imgclientes/".$EmpUrl1."/".$ImgNome;
        move_uploaded_file($tempFile,$ImgDir);

        if(!is_dir("imgclientes/$EmpUrl1/")) {
            mkdir("imgclientes/$EmpUrl1", 0755);
        }

        if(!is_dir("imgclientes/$EmpUrl1/mini/")) {
            mkdir("imgclientes/$EmpUrl1/mini", 0755);
        }
        $ImgDirMini = "imgclientes/".$EmpUrl1."/mini/".$ImgNome;        

        $DimImg=getimagesize($ImgDir);
        $LarImg=$DimImg[0];
        $AltImg=$DimImg[1];

        if($LarImg<$AltImg){    
            $img = new canvas();
            $img->carrega("$ImgDir")
            ->redimensiona( 430, 620, 'crop' )
            ->grava("$ImgDir");

            $img = new canvas();
            $img->carrega("$ImgDir")
            ->redimensiona( $LarMini, $AltMini, 'crop' )
            ->grava("$ImgDirMini");
        }else{
            $img = new canvas();
            $img->carrega("$ImgDir")
            ->redimensiona( 640, 480, 'crop' )
            ->grava("$ImgDir");

            $img = new canvas();
            $img->carrega("$ImgDir")
            ->redimensiona( $LarMini, $AltMini, 'crop' )
            ->grava("$ImgDirMini");
        }

        mysql_query("INSERT INTO `dados_img` SET `Emp`=$EmpPess32,`Bloco`=$IdBloco32,`Vinculo`=$IdVinc32,`Img`='$ImgNome';");

    } else {
        echo 'Tipo de arquivo inválido.';
    }
}else{
    echo 'Erro de validação.';
}
$ContNot=$ContNot+1;
}
?>

This is the error shown after upload attempt: Error Not Found.

What should I change to work on my site in php?

Answer 1

Download the package on address

Simple Solution:

Html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Demo - JQuery Upload</title>
<script src="Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<link href="Css/jquery.fileupload.css" rel="stylesheet" type="text/css" />
<link href="Css/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="Css/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
</head>
<body>

<br>
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Escolha as Fotos</span>
    <input id="fileupload"  type="file" name="FilesPic" multiple data-url="salvar_foto.php">
</span>
<br>
<br>
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<div id="files" class="files"></div>
<!---->
<div class="row" id="rowFotos"></div>
<!---->
<script src="Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Scripts/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="Scripts/jquery.fileupload.js" type="text/javascript"></script>
<script type="text/javascript">
    function Reset(){
        $('#progress .progress-bar').css('width', '0%');
    }
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                window.setTimeout('Reset()', 2000);                    
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css('width', progress + '%');
            }
        });
    });
</script>
</body>
</html>

Obs: html 5 and remember to tag <input id="fileupload" type="file" name="FilesPic" multiple data-url="salvar_foto.php">, the data-url being your PHP script or the language that is using the corresponding file.

PHP

<?php
    if (isset($_FILES) && isset($_FILES['FilesPic'])){
        move_uploaded_file($_FILES['FilesPic']['tmp_name'], 'Imagens/'. $_FILES['FilesPic']['name']);
        echo '1';
    }

Obs: the simple code in PHP already records the image solution, but of course you can improve this code to receive images of certain size, receive only images, etc. Also do not forget to give permission in the folder Write images.

Directory of Folder

Obs: Note that in the item Html has the css and the js according to the folder layout, then have a similar organization as this.

Screen displayed in browser

Clicking the button and choosing the images will be sent to the Images directory (Ref. Directory of Folder)

Download the Project