设为首页收藏本站

豆壳DouPHP开发者社区

 找回密码
 立即注册

[共享] 干货手把手教大家给您的产品页面加入多图和细节展示

  [复制链接]
cuihaifeng1234 发表于 2015-3-25 10:57:23 | 显示全部楼层 |阅读模式
本帖最后由 cuihaifeng1234 于 2016-1-15 09:25 编辑

前些日子做的多图发现IE竟然不兼容,WebUploader官方的例子也是,IE下根本点不开。所以自己今天改写一下,并在默认模版的基础上增加了这个功能。在这里详细来说明一下步骤:1.系统采用plupload来作为一个上传工具,话不多了,请大家自行下载此插件(依赖Jquery)
2.下载成功后我们将下载来的js放到网站admin目录下
3.在admin/templates/product.html导入所需要的js文件
  1. <!-- 上传组件 -->
  2. <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
  3. <link rel="stylesheet" href="js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />

  4. <!-- 上传组件 -->
  5. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

  6. <!-- production -->
  7. <script type="text/javascript" src="js/plupload.full.min.js"></script>
  8. <script type="text/javascript" src="js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
  9. <script type="text/javascript" src="js/i18n/zh_CN.js"></script>
复制代码
4.在product.htm 190行的位置添加如下代码:
  1.           <!-- 图集上传 -->
  2.           <tr>
  3.                 <td>产品图集上传(编辑商品图集上传会覆盖掉产品的图集,建议一次性上传)</td>
  4.                 <td>
  5.                 <div id="uploader">
  6.                 <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
  7.                 </div>
  8.                 </td>
  9.           </tr>
复制代码

5.初始化上传组件,加到文件最后就可以
  1. {literal}
  2. <script type="text/javascript">
  3. // 初始化上传组件
  4. $(function() {
  5.         $("#uploader").plupload({
  6.                 // 设置
  7.                 runtimes : 'html5,flash,silverlight,html4',
  8.                 url : 'upload.php',

  9.                 // 最大上传数量
  10.                 max_file_count: 20,
  11.                
  12.                 chunk_size: '1mb',

  13.                 // 客户端看到的缩略图
  14.                 resize : {
  15.                         width : 800,
  16.                         height : 600,
  17.                         quality : 90,
  18.                         crop: true // crop to exact dimensions
  19.                 },
  20.                
  21.                 filters : {
  22.                         // 最大上传文件
  23.                         max_file_size : '10mb',
  24.                         
  25.                         mime_types: [
  26.                                 {title : "Image files", extensions : "jpg,gif,png"},
  27.                                 {title : "Zip files", extensions : "zip"}
  28.                         ]
  29.                 },
  30.                 rename: true,
  31.                
  32.                 sortable: true,
  33.                 dragdrop: true,
  34.                 views: {
  35.                         list: true,
  36.                         thumbs: true, // Show thumbs
  37.                         active: 'thumbs'
  38.                 },

  39.                 flash_swf_url : 'js/Moxie.swf',
  40.                 silverlight_xap_url : 'js/Moxie.xap'
  41.         });


  42.         $('#form').submit(function(e) {
  43.                 if ($('#uploader').plupload('getFiles').length > 0) {

  44.                         $('#uploader').on('complete', function() {
  45.                                 
  46.                                 $('#form')[0].submit();
  47.                         });

  48.                         $('#uploader').plupload('start');
  49.                 }
  50.         });
  51. });
  52. </script>
  53. {/literal}
复制代码
6.upload.php见附件(放到admin目录下)
执行完上面几部可以看到如下的演示效果

7.后端代码的处理
当我们的图片上传成功后,还需要在数据库中保存信息,在product.php中做如下修改(添加和编辑一样的道理就不分别说明)

  1.         //上传图片数量
  2.         $uploader_count = $_POST['uploader_count'];
  3.         //上传图片名称
  4.         $files="";
  5.         for($i = 0;$i<$uploader_count;$i++)
  6.         {
  7.                 $name = "uploader_".$i."_name";
  8.                 //echo $_POST[$name];
  9.                 $files = $i==0?$_POST[$name]:$files.",".$_POST[$name];
  10.         }
复制代码
这样在数据库中生成的字符串就是 1.jpg,2.jpg ....然后接下来你懂得,使用explode函数处理就可以取得图片信息,接下来需要插入到数据库中,在这里我建立了一个product_images的字段在product表中,修改后的sql语句如下:
  1.     $sql = "INSERT INTO " . $dou->table('product') .
  2.              " (id, cat_id, product_name, price, defined, content, product_image ,keywords, add_time, description,product_images)" .
  3.              " VALUES (NULL, '$_POST[cat_id]', '$_POST[product_name]', '$_POST[price]', '$_POST[defined]', '$_POST[content]', '$file', '$_POST[keywords]', '$add_time', '$_POST[description]','$files')";
复制代码

二.图集列表
当我们在编辑商品的时候,为了方便我们在后台看到图集列表,在product.php 中改下update的代码:
  1. elseif ($rec == 'update') {
  2.     if (empty($_POST['product_name']))
  3.         $dou->dou_msg($_LANG['product_name'] . $_LANG['is_empty']);
  4.     if (!$check->is_price($_POST['price'] = trim($_POST['price'])))
  5.         $dou->dou_msg($_LANG['price_wrong']);
  6.         
  7.     // 上传图片生成
  8.     if ($_FILES['product_image']['name'] != "") {
  9.         // 分析商品图片名称
  10.         $basename = basename($_POST['product_image']);
  11.         $file_name = substr($basename, 0, strrpos($basename, '.'));
  12.         
  13.         $upfile = $img->upload_image('product_image', $file_name); // 上传的文件域
  14.         $file = $images_dir . $upfile;
  15.         $img->make_thumb($upfile, $_CFG['thumb_width'], $_CFG['thumb_height']);
  16.         
  17.         $up_file = ", product_image='$file'";
  18.     }
  19.    
  20.     // CSRF防御令牌验证
  21.     $firewall->check_token($_POST['token'], 'product_edit');
  22.    
  23.     // 格式化自定义参数
  24.     $_POST['defined'] = str_replace("\r\n", ',', $_POST['defined']);
  25.         
  26.         
  27.         //上传图片数量
  28.         $uploader_count = $_POST['uploader_count'];
  29.         
  30.         //上传图片名称
  31.         $files="";
  32.         for($i = 0;$i<$uploader_count;$i++)
  33.         {
  34.                 $name = "uploader_".$i."_name";
  35.                 //echo $_POST[$name];
  36.                 $files = $i==0?$_POST[$name]:$files.",".$_POST[$name];
  37.         }
  38.         if(empty($files)){
  39.         $files = $_POST['product_images2'];
  40.         }
  41.         
  42.     //echo $files;
  43.     $sql = "update " . $dou->table('product') .
  44.              " SET cat_id = '$_POST[cat_id]', product_name = '$_POST[product_name]', price = '$_POST[price]', defined = '$_POST[defined]' ,content = '$_POST[content]'" .
  45.              $up_file . ", keywords = '$_POST[keywords]', description = '$_POST[description]',product_images = '$files' WHERE id = '$_POST[id]'";
  46.     //echo $sql;
  47.         $dou->query($sql);
  48.    
  49.     $dou->create_admin_log($_LANG['product_edit'] . ': ' . $_POST['product_name']);
  50.     $dou->dou_msg($_LANG['product_edit_succes'], 'product.php');
  51. }
复制代码

前台HTML文件,product.htm需要增加(198行):

  1. <!-- 列表-->
  2.           {if $product.product_images}
  3.           <tr>
  4.                 <td>产品图集列表</td>
  5.                 <td>
  6.                 <!-- {foreach from=$product.product_images item='image'} -->
  7.                 <a href="../upload/{$image}" target="_blank" style="display:block;float:left; padding:5px;"><img src="../upload/{$image}"  height="100"/>
  8.                 <span style="display:block;text-align:center;background:black;color:white">{$image}</span>
  9.                 </a>
  10.                 <!-- {/foreach} -->
  11.                 </td>
  12.            <input type="hidden" name="product_images2" value ="{$product.product_images2}"/>
  13.           </tr>                  
  14.           {/if}
复制代码
此步骤完成,如果成功在编辑商品的时候会看到如下画面:


三.前台HTML显示
当我们完成上面这几部,并且数据都已经存在数据库中时,我们就可以编写我们的前台的product.dwt来显示我们的商品信息
步骤如下:
product.php 28行 增加如下代码:
  1.     //图集列表
  2.         if($product['product_images'])
  3.         {
  4.                 $picList = explode(',',$product['product_images']);
  5.                 if(count($picList)>0){
  6.                 $product['product_images'] = $picList;
  7.                 }
  8.         }
复制代码

前台CSS,JS文件不再给出。网上有很多效果,完整做完的效果图就是这样拉



upload.php 源码:
<?php

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("ragma: no-cache");

@set_time_limit(5 * 60);
// Settings
$targetDir = '../upload';
$cleanupTargetDir = true; // Remove old files
$maxFileAge = 5 * 3600; // Temp file age in seconds


// Create target dir
if (!file_exists($targetDir)) {
        @mkdir($targetDir);
}

// Get a file name
if (isset($_REQUEST["name"])) {
        $fileName = $_REQUEST["name"];
} elseif (!empty($_FILES)) {
        $fileName = $_FILES["file"]["name"];
} else {
        $fileName = uniqid("file_");
}

$filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;

// Chunking might be enabled
$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;


// Remove old temp files       
if ($cleanupTargetDir) {
        if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
        }

        while (($file = readdir($dir)) !== false) {
                $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;

                // If temp file is current file proceed to the next
                if ($tmpfilePath == "{$filePath}.part") {
                        continue;
                }

                // Remove temp file if it is older than the max age and is not the current file
                if (preg_match('/\.part$/', $file) && (filemtime($tmpfilePath) < time() - $maxFileAge)) {
                        @unlink($tmpfilePath);
                }
        }
        closedir($dir);
}       


// Open temp file
if (!$out = @fopen("{$filePath}.part", $chunks ? "ab" : "wb")) {
        die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
}

if (!empty($_FILES)) {
        if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
        }

        // Read binary input stream and append it to temp file
        if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
        }
} else {       
        if (!$in = @fopen("php://input", "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
        }
}

while ($buff = fread($in, 4096)) {
        fwrite($out, $buff);
}

@fclose($out);
@fclose($in);

// Check if file has been uploaded
if (!$chunks || $chunk == $chunks - 1) {
        // Strip the temp .part suffix off
        rename("{$filePath}.part", $filePath);
}

// Return Success JSON-RPC response
die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

lmq545 发表于 2015-4-11 22:07:44 | 显示全部楼层
$("#uploader").plupload({…………})
javascript代码到这了就不执行了
回复 支持 1 反对 0

使用道具 举报

 楼主| cuihaifeng1234 发表于 2015-3-28 07:53:50 | 显示全部楼层
顶起来啊技术帖子
回复 支持 1 反对 0

使用道具 举报

一眼看透 发表于 2015-3-25 22:43:28 | 显示全部楼层
你是有心人啊
回复 支持 反对

使用道具 举报

yclau 发表于 2015-3-30 16:35:55 | 显示全部楼层
干货必须顶起来啊。。
回复 支持 反对

使用道具 举报

746023 发表于 2015-4-2 10:24:38 | 显示全部楼层
真真的干货技术贴
回复 支持 反对

使用道具 举报

 楼主| cuihaifeng1234 发表于 2015-4-4 06:43:21 来自手机 | 显示全部楼层
douphp0905 发表于 2015-3-31 09:44
好 正好需要这个功能

谢谢支持哈
回复 支持 反对

使用道具 举报

746023 发表于 2015-4-4 16:13:05 | 显示全部楼层
upload.php没有啊?没有附件啊?
回复 支持 反对

使用道具 举报

chen826714 发表于 2015-4-11 09:45:24 | 显示全部楼层
顶起来啊技术帖子
回复 支持 反对

使用道具 举报

lmq545 发表于 2015-4-11 21:10:44 | 显示全部楼层
这个功能好,刚做的外贸网站刚好需要这个
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|DouCo.Com ( 闽ICP备07031922号  

GMT+8, 2018-8-17 17:43 , Processed in 0.576623 second(s), 35 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.|Style by Coxxs

快速回复 返回顶部 返回列表