<?php
include("../conn/conn.php");
$sql = "SELECT * from goods where id = 1";
$stmt = $db->prepare($sql);
$stmt->execute(array());
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$pics = json_decode($row['pics'], true);
$title= $row['title'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php结合数据库演示商品多图片上传</title>
<style type="text/css">
a{cursor:pointer;}
body{background: #fff none repeat scroll 0 0; color: #333; font: 12px/1.5 "Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif; background-position: left top; background-repeat: repeat; background-attachment: scroll;}
.clearfix:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0}
*:first-child+html .clearfix{zoom:1}
ul,li{list-style: none;padding:0;margin:0}
/**********上传样式***********/
.progress{position:relative;padding: 1px; border-radius:3px; margin:30px 0 0 0;}
.bar{background-color: green; display:block; width:0%; height:20px; border-radius:3px;}
.percent{position:absolute; height:20px; display:inline-block;top:3px; left:2%; color:#fff}
.progress{
height: 100px;
padding: 30px 0 0;
width:100px;
border-radius: 0;
}
.btn{-webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px;
background-color:#ff8400; color:#fff; display:inline-block; height:28px; line-height:28px; text-align:center; padding:0 12px;
transition:background-color .2s linear 0s; border:0; cursor:pointer;text-decoration: none}
.btn:hover{background-color:#e95a00; text-decoration:none}
.photos_area .item {
float: left;
margin: 0 10px 10px 0;
position: relative;
}
.photos_area .item{position: relative;float:left;margin:0 10px 10px 0;}
.photos_area .item img{border: 1px solid #cdcdcd;}
.photos_area .operate{background: rgba(33, 33, 33, 0.7) none repeat scroll 0 0; bottom: 0; padding:5px 0; left: 0; position: absolute; width: 102px; z-index: 5; line-height: 21px; text-align: center;}
.photos_area .operate i{cursor: pointer; display: inline-block; font-size: 0; height: 12px; line-height: 0; margin: 0 5px; overflow: hidden; width: 12px; background: url("images/icon_sucaihuo.png") no-repeat scroll 0 0;}
.photos_area .operate .toright{background-position: -13px -13px; position: relative;top:1px;}
.photos_area .operate .toleft{background-position: 0 -13px; position: relative;top:1px;}
.photos_area .operate .del{background-position: -13px 0; position: relative;top:0px;}
.photos_area .preview{background-color: #fff; font-family: arial; line-height: 90px; text-align: center; z-index: 4; left: 0; position: absolute; top: 0; height: 90px; overflow: hidden; width: 90px;}
td{padding: 20px 0}
</style>
</head>
<body>
<form action="detail_post.php" method="POST" id="form" >
<table class="table table_detail" style="width:800px;" align="center">
<tbody>
<tr>
<td class="td_left">商品标题:</td>
<td>
<input name="title" type="text" class="common_txt" value="<?php echo $title ?>" autocomplete="off" style="border:1px solid #ccc;padding: 5px;width:400px"/>
</td>
</tr>
<tr id="logo_area_tr" class='logo_area_tr'>
<td class="td_left"><a class="btn" id="logo_upload_btn" href="javascript:;" >上传商品图片</a></td>
<td>
<div id="logo_upload_area" style='width:80%'>
<div id='photos_area' class="photos_area clearfix">
<?php
if (isset($pics)) {
foreach ($pics as $v) {
?>
<div class='item'>
<input type='hidden' name='pics[]' value='<?php echo $v; ?>'/>
<img src='<?php echo $v; ?>' width='100px' height='100px'/>
<div class='operate'><i class='toleft'>左移</i><i class='toright'>右移</i><i class='del'>删除</i></div>
</div>
<?php }
} ?>
</div>
</td>
</tr>
<tr>
<td class="td_left"></td>
<td>
<button class="btn btn-info btn-sm" type="submit" id="btn_submit">
<i class="icon-ok bigger-110 "></i>
保 存
</button>
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
<script type="text/javascript">
var uploader = new plupload.Uploader({
runtimes: 'gears,html5,html4,silverlight,flash',
browse_button: 'logo_upload_btn',
url: "ajax.php",
flash_swf_url: 'plupload/Moxie.swf',
silverlight_xap_url: 'plupload/Moxie.xap',
filters: {
max_file_size: '25mb',
mime_types: [
{title: "files", extensions: "jpg,png,gif,jpeg,mp4"}
]
},
multi_selection: true,
init: {
FilesAdded: function(up, files) {
$("#btn_submit").attr("disabled", "disabled").addClass("disabled").val("正在上传...");
var item = '';
plupload.each(files, function(file) { //遍历文件
item += "<div class='item' id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></div>";
});
$("#photos_area").append(item);
uploader.start();
},
UploadProgress: function(up, file) { //上传中，显示进度条
var percent = file.percent;
$("#" + file.id).find('.bar').css({"width": percent + "%"});
$("#" + file.id).find(".percent").text(percent + "%");
},
FileUploaded: function(up, file, info) {
var data = eval("(" + info.response + ")");
$("#" + file.id).html("<input type=hidden name='pics[]' value='" + data.src + "'><img src='" + data.src + "' alt='" + data.name + "' width='100px' height='100px'>\n\
<div class='operate'><i class='toleft'>左移</i><i class='toright'>右移</i><i class='del'>删除</i></div>")
$("#btn_submit").removeAttr("disabled").removeClass("disabled").val("提 交");
plupload.rar （99个子文件） 
phpsc 
jquery.js 92KB goods.sql 219B index.php 10KB images 
icon_sucaihuo.png 2KB del.php 80B detail_post.php 348B plupload plupload.full.min.js 106KB plupload.min.js 15KB
Moxie.swf 29KB jquery.plupload.queue css jquery.plupload.queue.css 4KB img 
done.gif 1024B error.gif 994B transp50.png 399B backgrounds.gif 3KB delete.gif 180B buttons-disabled.png 1KB throbber.gif 2KB buttons.png 1KB jquery.plupload.queue.js 15KB jquery.plupload.queue.min.js 7KB moxie.js 269KB Moxie.xap 61KB plupload.dev.js 57KB i18n el.js 2KB th_TH.js 3KB nl.js 2KB fa.js 2KB zh_TW.js 2KB es.js 2KB da.js 1KB tr.js 1KB sr_RS.js 857B de.js 2KB hu.js 2KB fi.js 2KB en.js 1KB it.js 1KB sk.js 2KB lt.js 2KB ro.js 2KB lv.js 2KB ka.js 3KB fr.js 2KB zh_CN.js 2KB hr.js 2KB ko.js 2KB sq.js 1011B uk_UA.js 2KB az.js 2KB ru.js 2KB sv.js 1KB sr.js 1KB kk.js 2KB km.js 3KB pt_BR.js 2KB id.js 2KB ar.js 2KB pl.js 1KB ms.js 1KB et.js 1KB mn.js 847B bs.js 2KB hy.js 2KB ja.js 2KB he.js 2KB cy.js 1KB cs.js 2KB moxie.min.js 91KB jquery.ui.plupload css jquery.ui.plupload.css 6KB jquery.ui.plupload.js 38KB img plupload.png 6KB loading.gif 4KB jquery.ui.plupload.min.js 18KB uploads 
146961392398827.jpg 12KB 146961433923189.jpg 155KB 146898128957977.jpg 35KB 146961399216578.jpg 142KB 146898129740305.gif 30KB 146961430174025.jpg 198KB 146961431627726.jpg 159KB 146961430681696.jpg 8KB 146961434661204.jpg 65KB 146961432684278.jpg 63KB 146961433134645.jpg 159KB 146961431040105.gif 867KB 146961435197231.jpg 128KB 146961437027616.jpg 148KB 146961383674945.jpg 9KB 146961390113548.jpg 690KB 146961398377791.jpg 8KB 146961384838298.jpg 151KB 146898197493174.jpg 35KB 146961382378623.jpg 219KB 146961431977651.jpg 121KB 146898129314056.jpg 45KB 146961435879634.jpg 49KB ajax.php 1KB connect.php 333B uploads146898084936548.jpg 45KB资源评论
seanshuosun2021-02-19根目录下的conn文件没有啊 少个文件
