Joomla!-开源天空

我们再来看看数据表的结构，有一个字段imgfilename ，这个一个图片的路径，我们当然可以将这个图片上传到服务器相关位置，然后在这个地方输入我们的路径，但是这样显然不是很方便，现在我们来进行一些修改，从而能够上传图片到服务器，并自动给出图片的路径。

第一步，当然还是要在后台的model目录中，showcase.xml中，去掉关于imgfilename这一行。

第二步，修改administrator/components/com_showcase/views/showcase/tmpl/form.php文件：在我们上次添加所见所得功能的table中增加一个<tr>，代码如下：

<tr>
<td width="40%" class="paramlist_key">
 <span class="editlinktip">
  <label id="detailsimgfilename-lbl" for="detailsimgfilename" class="hasTip" title="imgfilename::imgfilename">imgfilename</label>
 </span>
</td>
<td class="paramlist_value">
 <input type="text" name="details[imgfilename]" id="detailsimgfilename" value="<?php echo $this->item->imgfilename;?>" class="text_area" size="50" />
 <div class="button2-left"><div class="image"><a class="modal-button" title="logo upload" href="/index.php/component/showcase/images.html?tmpl=component&e_name=text"  rel="{handler: 'iframe', size: {x: 570, y: 100}}">logo upload</a></div></div>
</td>
</tr>

现在我们来看看，添加记录的页面：

点击logo upload ，可以弹出一个窗口，不过现在窗口的文件，我们还没有完成，接下来我们来完成，文件上传部分。

第三步，在views目录下创建一个目录images ,以及images/tmpl目录，在images目录下创建一个新文件view.html.php，代码如下：

<?php

defined('_JEXEC') or die();

jimport( 'joomla.application.component.view' );

class ShowcasesViewImages extends JView
{

 function display($tpl = null)
 {

  $session = & JFactory::getSession();
  $this->assignRef('session',$session);
  
  parent::display($tpl);
 }
}

在tmpl目录下，创建一个default.php文件，代码如下：

<form action="<?php echo JURI::base(); ?>index.php?option=com_showcase&amp;task=upload&amp;<?php echo $this->session->getName().'='.$this->session->getId(); ?>&pop_up=1&<?php echo JUtility::getToken(); ?>=1" id="uploadForm" method="post" enctype="multipart/form-data">
 <fieldset> 
  <legend><?php echo JText::_('Upload'); ?></legend> 
  <fieldset class="actions">  
   <input type="file" id="file-upload" name="Filedata" />  
   <input type="submit" id="file-upload-submit" value="<?php echo JText::_('Start Upload'); ?>"/>  
   <span id="upload-clear"></span> 
  </fieldset> 
  <ul class="upload-queue" id="upload-queue">  
   <li style="display: none" /> 
  </ul> </fieldset>
  <input type="hidden" name="return-url" value="" />
</form>

这里我们没有采用fancyupload ，以后我们会修改这部分，改为fancyupload上。

现在，再点击logo upload 按钮，就会出现，选择图片并上传的界面：

第四步，修改controller.php文件，接收并保存上传后的图片文件，我们增加一个函数upload ，代码如下：

  function upload(){
   global $mainframe;
   $root='/images/templates';
   JRequest::checkToken( 'request' ) or die( 'Invalid Token' );
   $file   = JRequest::getVar( 'Filedata', '', 'files', 'array' );
   $folder  = JRequest::getVar( 'folder', '', '', 'path' );
   $format  = JRequest::getVar( 'format', 'html', '', 'cmd');
   $return  = JRequest::getVar( 'return-url', null, 'post', 'base64' );
   $err  = null;
    // Make the filename safe
   
    jimport('joomla.filesystem.file');
    $file['name'] = JFile::makeSafe('showcase-'.$file['name']);

   
    if (isset($file['name'])) { 
  
       $filepath = $_SERVER['DOCUMENT_ROOT'].$root.DS.strtolower($file['name']);
       $filesavepath = $root.DS.strtolower($file['name']); 
       if (!JFile::upload($file['tmp_name'], $filepath)) { 
      
        if ($format == 'json') {   
         jimport('joomla.error.log');   
         $log = &JLog::getInstance('upload.error.php');   
         $log->addEntry(array('comment' => 'Cannot upload: '.$filepath));   
         header('HTTP/1.0 400 Bad Request');    die('Error. Unable to upload file');  
        } else {   
         JError::raiseWarning(100, JText::_('Error. Unable to upload file'));   
         if ($return) {    
          $mainframe->redirect(base64_decode($return).'&folder='.$folder);   
         }   
         return;  
        } 
       } else {  
        if ($format == 'json') {   
         jimport('joomla.error.log');   
         $log = &JLog::getInstance();   
         $log->addEntry(array('comment' => $folder));   
         $mainframe->redirect('index.php?option=com_showcase&view=images&layout=finish&tmpl=component&e_name=details[imgfilename]&upfile='.$filesavepath);    
         
        } else { 
                 
         $mainframe->redirect('index.php?option=com_showcase&view=images&layout=finish&tmpl=component&e_name=details[imgfilename]&upfile='.$filesavepath);   
         return;  
        } 
       }
    } else { 
      $mainframe->redirect('index.php', 'Invalid Request', 'error');
    }
  }

这部分代码不解释了，就是保存上传图片文件，要保证 $roort变量中指定的目录有写入权限，这里看起来很复杂，还有部分是为了将该改为fancyupload后，而保留的代码。

其实现在就可以上传图片，只是上传后的转向文件还没完成。

第五步，增加上传完毕后的处理页面，在tmpl目录中增加一个finish.php文件，其中，代码如下：

<form method="post" enctype="multipart/form-data">
 <fieldset>
  <legend>Upload Complete</legend>   
  <input type='text' style='width:400px' value='<?php echo JRequest::getVar('upfile'); ?>'>
  <input type='button' value='ok' onclick="onok();window.parent.document.getElementById('sbox-window').close();">
  <input type='button' value='cancel' onclick="window.parent.document.getElementById('sbox-window').close();">
  </fieldset>
</form>

<script >
 function onok(){
  window.parent.document.getElementById('detailsimgfilename').value='<?php echo JRequest::getVar('upfile');?>';
 }
</script>

上传完毕后，文件的保存地址，出现在弹出窗口中，确定后，这个路径保存在 imgfilename的输入框中。

现在我们就完成了后台图片的上传工作，不过我们也留下了两个工作，一是没有采用fancyupload ，二是我们保存图片的地址写在程序中，而没有通过后台参数设置，在实际工作中，这可能是需要的。这两项工作我们留作以后进行。

附件中，是截至目前，后台管理的所有文件，请下载参考：

---

收藏此文章：