翻阅了官方的文档,找度娘问了前十页,自己想,尝试,终于有成果了。
官方的文档,确实有点简单了,对于初次接触,是挺费劲的。
本功能由html发起,执行选择图片,上传图片操作,php接收html页面post的来的参数,请求下载图片,保存到服务器,顺便把路径保存到数据库。
CSS部分:
<style type="text/css">
.body{font-size: 14px;}
#imageContainer{}
#imageContainer ul,#imageContainer ul li{margin: 0;padding: 0;}
#imageContainer ul li{width:30%;padding-left:3px;float: left;list-style: none;min-height: 160px;overflow: hidden;}
.content{margin-bottom: 20px;border-left:solid 1px #d9d9d9;border-right: solid 1px #d9d9d9; padding-top:5px;}
.content ul{min-height: 30px;height: auto;}
.content ul,.content ul li{margin:0;padding:0;}
.content ul li{float:left;width:75%;height: 30px;line-height:30px;list-style: none;font-size: 12px;
border-bottom:solid 1px #d9d9d9;}
.content ul li input[type=text]{width:90%;margin-left: 5px;border:solid 1px #d9d9d9;}
.btn{background-color: #01b5e9;border:solid 1px #0094bf;border-radius: 4px;height: 25px;line-height: 25px; color:#fff;text-align: center;}
.titlecontainer{border-bottom: solid 1px #d9d9d9;;}
.title{float: left;width:100px;border-top: 2px solid #0094bf;height: 30px;line-height: 30px;text-align: center;
border-left: solid 1px #d9d9d9;border-right:solid 1px #d9d9d9;color:#0094bf;font-weight: bold;}
.title_right{float: right;font-size: 14px;height: 30px;line-height: 30px;margin-right: 10px;}
.dia{font-size: 12px;}
/*width:100px;height: 30px;line-height:30px;border-radius: 5px;想弄个漂亮的提示框的
text-align: center;background-color: #000;color:#fff;filter:alpha(opacity=50); -moz-opacity:0.5;opacity:0.5;
position: fixed;z-index: 999;margin:0 auto;top:30%;left:37%;display: none;*/
</style>
HTML部分:
<div class="titlecontainer">
<div class="title">添加商品</div>
<div class="title_right">
<a style="text-decoration: none;color:#000;font-size: 12px;font-weight: bold;" href="http://abc.com/index.php?g=User&m=Img&a=index&token={pigcms:$_SESSION['token']}">查看所有商品</a>
</div>
<div style="clear: both;"></div>
</div>
<div class="content">
<ul>
<li style="width:25%;text-align: right;">商品标题:</li>
<li><input type="text" id="txtname" maxlength="20" /></li>
<li style="width:25%;text-align: right;">所属类别:</li>
<li><select id="seltype" style="margin-left: 5px;"><option value="">-请选