<li><label>图片</label>
<div class="upload_img_content">
<form action="/Merch/Shop/Upload" id="form1" class="uploadimg" role="form" method="post" enctype="multipart/form-data" >
<input name="" type="button" class="btn" id="upimage" value="上传图片" />
<input type="file" name="pic" id="upfile" class="btn btn-file" />
</form>
<ul class="imglist">
</ul>
</div>
</li>
<li><label> </label><input name="" οnclick="doSumbit()" type="submit" class="btn" value="添加"/></li>
上传图片的js写法:
<script>
function showResponse(data) {
switch (data) {
case "1":{
alert("图片不存在");
break;
}
case "2":{
alert("图片文件过大");
break;
}
case "3":{
alert("图片格式不正确");
break;
}
case "4":{
alert("移动图片出错");
break;
}
default:{
var shopUrl = imageUrl+data;
var append = "<li class=\"selected\"><span><img src=\""+shopUrl+"\"><input id=\"imageTitle\" type=\"text\" style=\"width:166px;\" class=\"dfinput\" value=\"\" placeholder=\"请输入图片名称(可为空)\"/></span><i class=\"img_del\"></i></li>";
$(".imglist").append(append);
break;
}
};
}
$(function(){
$(".btn-file").change(function(){
if($(".imglist li").length < 5){
$(this).parent().ajaxSubmit({
success: function(data) {
showResponse(data);
},
error: function(msg) {
alert("error");
}
});
}else{
alert("只能上传五张照片");
}
});
// 删除图片操作
$(".imglist").delegate("li", "mouseover", function () {
$(this).children("i.img_del").show();
}).delegate("li", "mouseout", function () {
$(this).children("i.img_del").hide();
}).delegate("li i.img_del", "click", function () {
$(this).parent().remove();
});
});
</script>
PHP shop.Upload 方法
public function Upload() {
$uptypes = array('image/jpg', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/gif', 'image/bmp', 'image/x-icon', 'image/x-png');
$maxSize = 2000000; //上传文件大小限制
$file = $_FILES["pic"];
if (!is_uploaded_file($file['tmp_name'])) { //判断图片文件是否存在
return 1;
}
if ($file['size'] > $maxSize) { //判断图片大小是否大于$max_size
return 2;
}
if (!in_array($file['type'], $uptypes)) { //判断图片文件的格式
return 3;
}
$info = pathinfo($file["name"]);
$icon = date("YmdHis") . uniqid() .".".$info["extension"];
Video::mkFolder(Video::uploadPath()."shop");
$filename = Video::uploadPath()."shop/".$icon; //图片的路径
if (!move_uploaded_file($file['tmp_name'], $filename)) {
return 4;
}
return $icon;
}
提交方法:
<script type="text/javascript">
function doSumbit() {
var name = $("#name").val();
var desc = $("#desc").val();
var gwList = $("#gwList").val();
var url = $("#url").val();
var li = $(".imglist li");
if (name == "") {
alert("账号名称不能为空");
return;
}
var imgArr = [];
var leng = [];
for(var i = 0; i < li.length; i++) {
var src = li.eq(i).children().find("img").attr("src");
imgArr.push({imgSrc: src.substring(src.lastIndexOf('/')+1), imgTitle: li.eq(i).children().find("input").val()});
leng[i] = imgArr;
imgArr = [];
}
var imageList = JSON.stringify(leng);
$.ajax({
type: "post",
data: {
name: name,
desc: desc,
gwList: gwList,
pic: imageList,
url: url
},
dataType: "json",
url: "<?php echo \Framework\Net\Url::canvas("Merch", "Shop.doAdd")?>",
success: function (data) {
alert(data["message"]);
window.location.href=data["location"];
},
error: function(){
alert("提交失败");
},
});
}
</script>
doAdd方法:
public function doAdd() {
$name = trim($this->request->get("name"));
$desc = $this->request->get("desc");
$gwList = $this->request->get("gwList");
$pic = $this->request->get("pic");
$url = $this->request->get("url");
if ($name== "") {
echo json_encode(array("status" => 0, "message" => "商铺名称不能为空", "location" => \Framework\Net\Url::canvas("Merch", "Shop.add")));
return;
}
if ($url== "") {
echo json_encode(array("status" => 0, "message" => "商铺地址不能为空", "location" => \Framework\Net\Url::canvas("Merch", "Shop.add")));
return;
}
$sessionArray = Session::get();
$businessId = $sessionArray["id"];
$info = array(
"businessId" => $businessId,
"name" => $name,
"desc" => $desc,
"pic" => $pic,
"url" => $url,
"gwList" => $gwList,
"created" => time()
);
Shop::add($info);
echo json_encode(array("status" => 1, "message" => "添加商户成功", "location" => \Framework\Net\Url::canvas("Merch", "Shop.run")));
}