Has anyone ever been able to use jQuery File Upload?

8

I refer to this link link. The documentation is very vague. I already changed the "action" of the "form" but without success. Html5 form:

<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>

block_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 the upload attempt: Error Not Found.

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

    
asked by anonymous 22.04.2014 / 17:43

1 answer

16

Download the package at 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>

Note: Html 5 and remember to put in the <input id="fileupload" type="file" name="FilesPic" multiple data-url="salvar_foto.php"> tag, 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';
    }

Note: The simple code in PHP already writes the image solution, but of course you can improve this code to receive images of a certain size, receive only images, etc. Also do not forget to give permission in the Writing Images folder.

Folder directory

NotethatintheHtmlitemyouhavecssandjsproperlyaccordingtothefolderlayout,sohaveasimilarorganizationlikethis.

Displaydisplayedinbrowser

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

Download the Project

    
22.04.2014 / 19:11