Zend: Uploader,afficher instantanément une image et l'enregistré

ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
- 23 janv. 2015 à 12:40
Bonjour, Uploader, afficher instantanément une image et enregistrer cette image dans une base de données avec zend framework 1.12
Bonsoir tout le monde,
J'ai un problème depuis un certain temps. J'ai regardé beaucoup de tutoriel mais je n'ai pas vu un tutoriel pour mon cas. Pourriez-vous m'aider ?
Je souhaite uploader et afficher instantanément une image. Puis par la suite, s'il valide le formulaire, je veux copy l'image uploadé dans le dossier /public/photos/real. Actuellement j'arrive à uploader et à afficher instantanément une image. Mais la deuxième partie à savoir copy l'image uploadé dans le dossier /public/photos/real ne marche pas car il n'arrive pas à voir le fichier .tmp par défaut. S'il vous plait pouvez-vous m'aider ? D'avance merci
Ma vue

<script type="text/javascript">
$('#input01').filestyle({
input: false,
icon: false,
buttonText: 'Choisir une image'
});
$('#input02').filestyle({
input: false,
icon: false,
buttonText: 'Choisir une image'
});
$('#input03').filestyle({
input: false,
icon: false,
buttonText: 'Choisir une image'
});
$('#input04').filestyle({
input: false,
icon: false,
buttonText: 'Choisir une image'
});
$('#input05').filestyle({
input: false,
icon: false,
buttonText: 'Choisir une image'
});
</script>
<style type="text/css">
.badge{
display: none;
}
.row{
width: 690px;
height: 155px;
margin-left: 2px;
}
.preview1,.preview2,.preview3,.preview4,.preview5{
height: 110px;
width: 125px;
border: 1px solid #000;
cursor: pointer;
}
.col-xs-6{
width: 135px;
margin: 2;
padding-right: 2;
}
#input01,#input02,#input03,#input04,#input05
{
opacity: 0;
}
.bloc_ajouter{
width: 750px;
height: 250px;
padding-left: 25px;
padding-top: 15px;
box-shadow: 0px 0px 5px 10px rgba(0,0,0,0.25);
}
</style>
<div class="ab">
<div class="conbas">
<div id="dialogue">

</div>
<div class="bloc_ajouter">
<form name="form_photo" enctype="multipart/form-data" method="POST" action="<?php echo $this->baseUrl();?>/listeliee/picture/">
<br class="clear"/>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<img class="preview1" src="<?php echo $this->baseUrl(); ?>/images/photo_upload.png" alt="Preview" title="Preview" />
<input type="file" id="input01" tabindex="-1" name="input01" style="position: absolute; clip: rect(0px, 0px, 0px, 0px);" onchange="readURL(this, 1)" />
<input type="hidden" id="nb_image" value="1"/>
</div>
<div class="bootstrap-filestyle input-group">
<span tabindex="0" class="group-span-filestyle ">
<label class="btn btn-default ">
<label for="input01" id="label_upload">Choisir une image</label>
<span class="badge">1</span>
</label>
</span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<img class="preview2" src="<?php echo $this->baseUrl(); ?>/images/photo_upload.png" alt="Preview" title="Preview" />
<input type="file" id="input02" name="input02" onchange="readURL(this, 2)" />
</div>
<div class="bootstrap-filestyle input-group">
<span tabindex="0" class="group-span-filestyle" id="label_upload2">
<label class="btn btn-default">
<label for="input02" id="label_upload">Choisir une image</label>
<span class="badge">1</span>
</label>
</span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<img class="preview3" src="<?php echo $this->baseUrl(); ?>/images/photo_upload.png" alt="Preview" title="Preview" />
<input type="file" id="input03" name="input03" onchange="readURL(this, 3)" />
</div>
<div class="bootstrap-filestyle input-group">
<span tabindex="0" class="group-span-filestyle" id="label_upload2">
<label class="btn btn-default">
<label for="input03" name="input03" id="label_upload">Choisir une image</label>
<span class="badge">1</span>
</label>
</span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<img class="preview4" src="<?php echo $this->baseUrl(); ?>/images/photo_upload.png" alt="Preview" title="Preview" />
<input type="file" id="input04" name="input04" onchange="readURL(this, 4)" />
</div>
<div class="bootstrap-filestyle input-group">
<span tabindex="0" class="group-span-filestyle" id="label_upload2">
<label class="btn btn-default">
<label for="input04" id="label_upload">Choisir une image</label>
<span class="badge">1</span>
</label>
</span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<img class="preview5" src="<?php echo $this->baseUrl(); ?>/images/photo_upload.png" alt="Preview" title="Preview" />
<input type="file" id="input05" name="input05" onchange="readURL(this, 5)" />
</div>
<div class="bootstrap-filestyle input-group">
<span tabindex="0" class="group-span-filestyle" id="label_upload2">
<label class="btn btn-default">
<label for="input05" id="label_upload">Choisir une image</label>
<span class="badge">1</span>
</label>
</span>
</div>
</div>
</div>
<br class="clear"/>
<div style="position: relative; float: left; left: 278px;">
<input type="submit" value="Valider"/>
</div>
</form>
</div>
</div>
</div>



Mon controller

public function pictureAction()
{
$input = array();
$principale = 1;
$id_annonce=1;
for ($i = 1; $i <= 5; $i++) {
if (isset($_FILES['input0' . $i]) && !empty($_FILES['input0' . $i]['name']) && file_exists($_FILES['input0' . $i]['tmp_name'])) {
$input[$i] = $_FILES['input0' . $i]['name'];

$uploaddir = '../photos/real/';
$uploadfile = $uploaddir . $id_annonce . '_' . $i . '_' . $_FILES['input0' . $i]['name'];
if (move_uploaded_file($_FILES['input0' . $i]['tmp_name'], $uploadfile)) {
echo "Fichier envoyé";
} else {
echo "Fichier non envoyé";
}

$dataPhoto = array(
'id_annonce' => $id_annonce,
'fichier' => $input[$i],
'photo_principale' => $principale,
'del' => 0
);
$principale = 0;
$img = new Application_Model_DbTable_TPhoto();
$id_photo = $img->ajouterPhoto($dataPhoto);
}
}
if ($id_photo) {
$this->view->id_moto = 'OK';
$this->view->msg = "<div id='succes'><label>L'enregistrement de votre annonce est validé avec succès!!</label></div>";
}
}


Mon script

function readURL(input, nb) {
if (input.files && input.files[0]) {
if (input.files[0].size > 2097152)
{
alert("Le fichier est trop lourd!! Veuillez charger une photo de moins de 2mgo");
input.name = "";
$('.preview' + nb).attr('src', '/images/photo_upload.png');
}
else
{
var reader = new FileReader();
reader.onload = function (e) {
$('.preview' + nb).attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
}


Merci d'avance pour votre disponibilité à m'aider. Cordialement