在zf2中上傳後顯示圖像縮略圖

Question

我正在zend framework.I創建一個註冊表單，我需要上傳用戶圖像，我可以這樣做，但我的問題是如何顯示通過視圖上傳圖像？

代碼：在processAction（）

$request = $this->getRequest(); 
     if ($request->isPost()) { 

      $project = new Projects(); 

      $nonFile = $request->getPost()->toArray(); 
      $File = $this->params()->fromFiles('imageupload'); 
      $adapter = new \Zend\File\Transfer\Adapter\Http(); 

      //----------fetch name 
      $project->exchangeArray($form->getData()); 
      $name=$project->name; 

      //---------memcode generation 
      $id=substr($project->name,0,1); 
      $id=ucwords($id); 
      $sm = $this->getServiceLocator(); 
      $dbAdapter = $sm->get('Zend\Db\Adapter\Adapter'); 
      $sql="SELECT max(substr(memcode,2,5)) as maxcode from projects where substr(memcode,1,1)='$id'"; 
      $statement = $dbAdapter->query($sql); 
      $result = $statement->execute(); 
      $selectData = array(); 
      $abc = $result->current(); 
      foreach ($abc as $res) { 
      $selectData[]= $res; 
      } 
      if($selectData[0]=="") 
      { 
       $id.="00001"; 
      } 
      else 
      { 
       $id.=str_pad(intval($selectData[0])+1,5,0,STR_PAD_LEFT); 
      } 

      $name=$id.time().'.jpeg'; 
      $data = array_merge(
       $nonFile, 
       array('imageupload'=> $name) 
      ); 

       $data = array_merge(
       $data, 
       array('memcode'=> $id) 
      ); 
      var_dump($data); 
      //break; 
      //set data post and file ...  
      $form->setData($data); 

      if ($form->isValid()) { 

       $size = new Size(array('min'=>2000)); //minimum bytes filesize 


       $adapter->setValidators(array($size), $File['name']); 
       if (!$adapter->isValid()){ 
        $dataError = $adapter->getMessages(); 
        $error = array(); 
        foreach($dataError as $key=>$row) 
        { 
         $error[] = $row; 
        } 
        $form->setMessages(array('imageupload'=>$error)); 
       } 
       else 
       { 
        $adapter->setDestination('public/upload');   
        $adapter->addFilter('File\Rename', 
         array('target' => $adapter->getDestination().'/'.$name, 
         'overwrite' => true)); 
         if ($adapter->receive($File['name'])) { 
         $file = $adapter->getFilter('File\Rename')->getFile(); 
         print_r($file[0]['target']); 
        } 
       } 
      } 
      } 

視圖代碼：

<?php 
$this->headScript()->appendFile('/js/jquery.min.js'); 
echo $this->headScript(); 
?> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
$('#countrycode').val('1'); 


    $("#religioncode").change(function() { 
     str=$(this).val(); 
     //alert(str); 
     $.ajax({ 
      type: "POST", 
      dataType: 'json', 
      url:"<?php echo $this->url(NULL,array('controller'=>'Register', 'action' =>'caste')); ?>", 
      data:{ 
      religioncode:str}, 
      success: function(ajaxresult){ 
      var appenddata1=""; 
      $("#castecode").empty(); 
      ajaxresult=ajaxresult.caste; 
      $("#castecode").append($('<option>Select Caste</option>')); 
      $.each(ajaxresult, function (key, value) { 
      $("#castecode").append($('<option></option>').val(value.castecode).text(value.castename)); 
     });   
      }, 
      error:function(){alert("Please select dropdown");} 
      }); 

    }); 

     $("#email").change(function() { 
     str=$(this).val(); 
       $.ajax({ 
      type: "POST", 
      dataType: 'json', 
      url:"<?php echo $this->url(NULL,array('controller'=>'Register', 'action' =>'emailajax')); ?>", 
      data:{ 
      email:str 
      }, 
      success: function(ajaxresult){ 
       ajaxresult=ajaxresult.memcode; 

      $.each(ajaxresult, function (key, value) { 
        if(value!=""){ 
         $("#email").val(''); 
         alert("E-mail ID already exists"); 
        } 
       });  
      }, 
     }); 
    }); 

    $("#countrycode").change(function() { 
    str=$(this).val(); 
     //alert(str); 
     $.ajax({ 
      type: "POST", 
      dataType: 'json', 
      url:"<?php echo $this->url(NULL,array('controller'=>'Register', 'action' =>'city')); ?>", 
      data:{ 
      countrycode:str}, 
      success: function(ajaxresult){ 
      //alert("success"); 
      if(str!=1) 
      { 
      $("#city").hide(); 
      }else{ 
      var appenddata1=""; 
      $("#citycode").empty(); 
      ajaxresult=ajaxresult.city; 
      $("#citycode").append($('<option>Select City</option>')); 
      $.each(ajaxresult, function (key, value) { 
      $("#citycode").append($('<option></option>').val(value.citycode).text(value.cityname)); 
     });   
      }}, 
      error:function(){alert("Please select dropdown");} 
      }); 
    }); 
}); 

</script> 
<html><body> 
<section class="register"> 
<head><link rel="stylesheet" href="/css/demo.css" type="text/css" ></head> 
<h2>Registration Form</h2> 
<?php if ($this->error): ?> 

<p class="error"> 
There were one or more issues with your submission. 
Please correct them as 
indicated below. 
</p> 
<?php endif ?> 
<?php 
$form = $this->form; 
$form->prepare(); 
$form->setAttribute('action', $this->url(NULL,array('controller'=>'Register', 'action' =>'process'))); 
$form->setAttribute('method', 'post'); 
$form->setAttribute('enctype','multipart/form-data'); 
echo $this->form()->openTag($form); 
?> 
<dl class="zend_form"> 
<div align="left"> 
<div name="account"><b><u>Account Details</u></b> 
<dt><?php echo $this->formLabel($form->get('email')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('email')); 
echo $this->formElementErrors($form->get('email')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('password')); 
?></dt> 
<dd><?php 
echo $this->formElement($form->get('password')); 
echo $this->formElementErrors($form->get('password')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('confirm_password')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('confirm_password')); 
echo $this->formElementErrors($form->get('confirm_password')); 
?> 

</dd> 



</div> 

<hr> 
<div name="personal"><b><u>Personal Details</u></b> 
<dt><?php echo $this->formLabel($form->get('name')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('name')); 
echo $this->formElementErrors($form->get('name')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('gender')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('gender')); 
echo $this->formElementErrors($form->get('gender')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('dob')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('dob')); 
echo $this->formElementErrors($form->get('dob')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('mobile')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('mobile')); 
echo $this->formElementErrors($form->get('mobile')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('heightcode')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('heightcode')); 
echo $this->formElementErrors($form->get('heightcode')); 
?></dd> 


<dt><?php echo $this->formLabel($form->get('countrycode')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('countrycode')); 
echo $this->formElementErrors($form->get('countrycode')); 
?></dd> 
<div id="city" name="city"> 
<dt><?php echo $this->formLabel($form->get('citycode')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('citycode')); 
echo $this->formElementErrors($form->get('citycode')); 
?></dd> 
</div> 

<dt><?php echo $this->formLabel($form->get('imageupload')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('imageupload')); 
echo $this->formElementErrors($form->get('imageupload')); 
?></dd> 
</div> 
<hr> 

<div name="social"><b><u>Social details</u></b> 
<dt><?php echo $this->formLabel($form->get('maritalstatus')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('maritalstatus')); 
echo $this->formElementErrors($form->get('maritalstatus')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('mothertongue')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('mothertongue')); 
echo $this->formElementErrors($form->get('mothertongue')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('religioncode')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('religioncode')); 
echo $this->formElementErrors($form->get('religioncode')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('castecode')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('castecode')); 
echo $this->formElementErrors($form->get('castecode')); 
?></dd> 

<dt><?php echo $this->formLabel($form->get('castenobar')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('castenobar')); 
echo $this->formElementErrors($form->get('castenobar')); 
?></dd> 

</div> 
<hr> 
<dt><?php echo $this->formLabel($form->get('captcha')); ?></dt> 
<dd><?php 
echo $this->formElement($form->get('captcha')); 

echo $this->formElementErrors($form->get('captcha')); 
?></dd> 

<dd><?php 
echo $this->formElement($form->get('submit')); 
echo $this->formElementErrors($form->get('submit')); 
?></dd> 
</dl> 
</div> 
<?php echo $this->form()->closeTag() ?> 
</section> 

Answer 1

使用的視圖的代碼如下所示我能夠上傳

<script type="text/javascript"> 
     function showimagepreview(input) { 
     if (input.files && input.files[0]) { 
     var filerdr = new FileReader(); 
     filerdr.onload = function(e) { 
     $('#imageupload').attr('src', e.target.result); 
     } 
     filerdr.readAsDataURL(input.files[0]); 
     } 
     } 
     </script> 
<input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)" /> 
<img id="imageupload" alt="uploaded image preview" height="100px" width="100px"/> 

後顯示圖像