Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

diego_83

PHP UPLOAD COM VISUALIZAÇÃO DA IMAGEM

Por , em PHP

Recommended Posts

diego_83    0

diego_83
Postado

OLA, ESTOU INICIANDO EM PROGRAMAÇÃO PHP E ESTOU CRIANDO UMA PAGINA DE CADASTRO DE IMAGEM QUE QUANDO FEITO O UPLOAD A IMAGEM APARECE ANTES DE SER SALVA, POREM SE SELECIONO UMA IMAGEM E DEPOIS CLICO DENOVO E NAO SELECIONO NADA NÃO CONSIGO LIMPAR DIV IMAGEM..PENSANDO NISTO CRIEI UM BOTÃO LIMPAR MAS NÃO SEI FAZÊ-LO FUNCIONAR...SEGUE CÓDIGO:

INDEX.PHP

<?php
require_once 'ConDB.php';
require_once 'addnew.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Diego</title>
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.form.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<?php
if(isset($errMSG)){
?>
<div class="alert alert-danger">
<span class="glyphicon glyphicon-info-sign"></span> <strong><?php echo $errMSG; ?></strong>
</div>
<?php
}
else if(isset($successMSG)){
?>
<div class="alert alert-success">
<strong><span class="glyphicon glyphicon-info-sign"></span> <?php echo $successMSG; ?></strong>
</div>
<?php
}
?>
<form id="form1" method="post" enctype="multipart/form-data">
<ul>
<li>
<div id="imgArea"><img id="blah" src="./img/default.jpg">
<div class="progressBar">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="imgChange"><span>Selecione uma imagem</span>
<input type="file" id="imgInp" name="user_image">
</div>
<button id="bt_troca" class="limpar btn btn-default" name="limpar"><span class="glyphicon glyphicon-erase"></span>  Limpar</button>
</div>
</li>
<li>
<div id="imgArea"><img id="blah1" src="./img/default.jpg">
<div class="progressBar">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="imgChange"><span>Selecione uma imagem</span>
<input type="file" id="imgInp1" name="user_image1" >
</div>
<button class="limpar btn btn-default"><span class="glyphicon glyphicon-erase"></span>  Limpar</button>
</div>
</li>
<li>
<div id="imgArea"><img id="blah2" src="./img/default.jpg">
<div class="progressBar">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="imgChange"><span>Selecione uma imagem</span>
<input type="file" id="imgInp2" name="user_image2" >
</div>
<button class="limpar btn btn-default"><span class="glyphicon glyphicon-erase"></span>  Limpar</button>
</div>
</li>
<li>
<div id="imgArea"><img id="blah3" src="./img/default.jpg">
<div class="progressBar">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="imgChange"><span>Selecione uma imagem</span>
<input type="file" id="imgInp3" name="user_image3">
</div>
<button class="limpar btn btn-default" ><span class="glyphicon glyphicon-erase"></span>  Limpar</button>
</div>
</li>
<li><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span>   Salvar
</button></li>
</ul>
</form>
</div>
</div>
<script src="js/upload_oficina.js"></script>
</body>
</html>
ADDNEW.PHP
<?php
if(isset($_POST['btnsave']))
{
$imgFile = $_FILES['user_image']['name'];
$tmp_dir = $_FILES['user_image']['tmp_name'];
$imgSize = $_FILES['user_image']['size'];
if(empty($imgFile)){
$errMSG = "Please Select Image File.";
}
else
{
$upload_dir = 'imagens/'; // upload directory
$imgExt = strtolower(pathinfo($imgFile,PATHINFO_EXTENSION)); // get image extension
// valid image extensions
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
// rename uploading image
$userpic = rand(1000,1000000).".".$imgExt;
// allow valid image file formats
if(in_array($imgExt, $valid_extensions)){
// Check file size '5MB'
if($imgSize < 5000000) {
move_uploaded_file($tmp_dir,$upload_dir.$userpic);
}
else{
$errMSG = "Sorry, your file is too large.";
}
}
else{
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
}
}
$imgFile1 = $_FILES['user_image1']['name'];
$tmp_dir1 = $_FILES['user_image1']['tmp_name'];
$imgSize1 = $_FILES['user_image1']['size'];
$imgExt1 = strtolower(pathinfo($imgFile1,PATHINFO_EXTENSION)); // get image extension
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
// rename uploading image
$userpic1 = rand(1000,1000000).".".$imgExt1;
// allow valid image file formats
if(in_array($imgExt1, $valid_extensions)){
// Check file size '5MB'
if($imgSize1 < 5000000) {
move_uploaded_file($tmp_dir1,$upload_dir.$userpic1);
}
else{
$errMSG = "Sorry, your file is too large.";
}
}
else{
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
}
$imgFile2 = $_FILES['user_image2']['name'];
$tmp_dir2 = $_FILES['user_image2']['tmp_name'];
$imgSize2 = $_FILES['user_image2']['size'];
$imgExt2 = strtolower(pathinfo($imgFile2,PATHINFO_EXTENSION)); // get image extension
// valid image extensions
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
// rename uploading image
$userpic2 = rand(1000,1000000).".".$imgExt2;
// allow valid image file formats
if(in_array($imgExt2, $valid_extensions)){
// Check file size '5MB'
if($imgSize2 < 5000000) {
move_uploaded_file($tmp_dir2,$upload_dir.$userpic2);
}
else{
$errMSG = "Sorry, your file is too large.";
}
}
else{
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
}
$imgFile3 = $_FILES['user_image3']['name'];
$tmp_dir3 = $_FILES['user_image3']['tmp_name'];
$imgSize3 = $_FILES['user_image3']['size'];
$imgExt3 = strtolower(pathinfo($imgFile3,PATHINFO_EXTENSION)); // get image extension
// valid image extensions
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
// rename uploading image
$userpic3 = rand(1000,1000000).".".$imgExt3;
// allow valid image file formats
if(in_array($imgExt3, $valid_extensions)){
// Check file size '5MB'
if($imgSize3 < 5000000) {
move_uploaded_file($tmp_dir3,$upload_dir.$userpic3);
}
else{
$errMSG = "Sorry, your file is too large.";
}
}
else{
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
}
// if no error occured, continue ....
if(!isset($errMSG))
{
$stmt = $DB_con->prepare('INSERT INTO up_foto(userPic, userPic1, userPic2, userPic3) VALUES(:upic, :upic1, :upic2, :upic3)');
$stmt->bindParam(':upic', $userpic);
$stmt->bindParam(':upic1', $userpic1);
$stmt->bindParam(':upic2', $userpic2);
$stmt->bindParam(':upic3', $userpic3);
if($stmt->execute())
{
$successMSG = "Nova Foto Cadastrada com Sucesso ...";
header("refresh:5;index.php"); // redirects image view page after 5 seconds.
}
else
{
$errMSG = "error while inserting....";
}
}
}
?>
UPLOAD.JS
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
function readURL1(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah1').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp1").change(function(){
readURL1(this);
});
function readURL2(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp2").change(function(){
readURL2(this);
});
function readURL3(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah3').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp3").change(function(){
readURL3(this);
});
ESTILO_UPLOAD.CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
background-color: #FFF;
}
a {
-moz-user-select: none;
color: #1155CC !important;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
#frame1, #frame0 {
background-color: #F7F7F7;
margin: 30px auto auto;
padding: 10px;
width: 750px;
border:1px solid #EEE;
}
#fade {
background: none repeat scroll 0 0 #D3DCE3;
display: none;
height: 100%;
left: 0;
opacity: 0.4;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
#centerBox {
background-color: #FFFFFF;
border: 5px solid #FFFFFF;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
display: none;
max-height: 480px;
overflow: auto;
visibility: hidden;
width: 710px;
z-index: 100;
}
.box1 {
background: none repeat scroll 0 0 #F3F7FD;
border: 1px solid #D3E1F9;
font-size: 12px;
margin-top: 5px;
padding: 4px;
}
.button1 {
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center bottom, #EDEDED 30%, #FFFFFF 83%);
border-color: #999999;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
color: #333333;
cursor: pointer;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
height: 25px;
line-height: 24px;
margin-right: 2px;
min-width: 40px;
padding: 0 16px;
text-align: center;
text-decoration: none;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
}
.button1:hover {
text-decoration: underline;
}
.button1:active, .a:active {
position: relative;
top: 1px;
}
#imgContainer {
width: 100%;
text-align: center;
position: relative;
}
#imgArea {
display: inline-block;
margin: 0 auto;
width: 150px;
height: 150px;
position: relative;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#imgArea img {
outline: medium none;
vertical-align: middle;
width: 150px;
height: 150px;
}
#imgChange {
background: url("../img/overlay.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
background-color: rgba(215, 44, 44, 0.5);
color: #FFFFFF;
display: block;
height: 30px;
left: 0;
line-height: 32px;
position: absolute;
text-align: center;
width: 100%;
}
#imgChange input[type=file] {
bottom: 0;
background-color: rgba(215, 44, 44, 0.5);
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 0;
}
/* Progressbar */
.progressBar {
background: none repeat scroll 0 0 #E0E0E0;
left: 0;
padding: 3px 0;
position: absolute;
top: 50%;
width: 100%;
display: none;
}
.progressBar .bar {
background-color: #FF6C67;
width: 0%;
height: 14px;
}
.progressBar .percent {
display: inline-block;
left: 0;
position: absolute;
text-align: center;
top: 2px;
width: 100%;
}
form#form1 ul{
list-style: none;
}
form#form1 ul li{
display: inline-block;
padding: 15px;
}
button.limpar{
width: 150px;
border-radius: 0;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito