在zf2中上传后显示图像缩略图

时间：2014-10-20 09:48:47

标签： php zend-framework zend-framework2 zend-view

我正在研究zend框架中的一个项目。我创建了一个注册表单，我需要上传用户图像，我能够这样做，但我的问题是如何通过视图显示上传的图像？< / p>

代码：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>

1 个答案:

答案 0 :(得分：0)

使用如下所示的视图代码，我可以在上传后显示图像

    <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"/>
相关问题
最新问题