Diego

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

``` ADDNEW.PHP ``` 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; } ```

diego_83

PHP UPLOAD COM VISUALIZAÇÃO DA IMAGEM