以下贴出代码,可实现ThinkPHP的ajax的上传图片操作,但这些代码基于上传功能的测试做的,很多地方,包括样式、安全过滤等方面还没考虑周全,如果要用,大家需要自行修改。
第一步:
在模板页<body>处添加如下代码:
<form id="formImg" action="__URL__/ajaximg" method="post" target="hidden_frame" enctype="multipart/form-data">
<div>
<input type="hidden" name="sh_id" id="sh_id" value="{$id}">
<!--这里的{$id}大家可以随便填1个进去-->
<input id="AidImg" type="file" name="AidImg"/>
<div style="display:none;" id="imgError">图片不可为空</div>
<iframe style="display:none" name='hidden_frame' id="hidden_frame"></iframe>
<div><img id="p_img" src="" width="80" height="80"/> </div>
<span class="help_inline">尺寸:80*80</span>
</div>
</form>
第二步:
模板页里的JS代码:(注意使用前,请引入jquery )
function uploadImg() {
var names=$("#AidImg").val().split(".");
if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")
{$("#imgError").html("<span>"+"图片必须为gif,jpg,png格式"+"</span>");
$("#formImg .help-inline").hide();
$("#imgError").show();
return;
}
$("#formImg").submit();
$("#imgError").show();
$("#imgError").html("图片上传中ing");
}
function callback(message,success,lujing) {
if(success==false)
{
$("#imgError").html("<span>"+message+"</span>");
$("#imgError").show();
}
else{
$("#imgError").hide();
$(".fromtrs").show();
$("#formImg .help-inline").hide();
var paths=lujing;
$("#p_img").attr("src",lujing+message);
$("#p_img").attr("imgname",message); //这里由于数据库里只存入图片名称加后缀名,故和路径拆开了
}
}
第三步:
PHP后台处理代码:
public function ajaximg(){
$cpimg_n=$_POST['cpimg_n'];
if($_FILES["AidImg"]["size"]){
//如果有上传动作
if($_FILES["AidImg"]["size"]!=0) {
$uploadPath = "./Tpl/Public/Uploads/".$sh_id."/product/";
if ($_FILES["AidImg"]["size"] < 1024 * 1024 * 2){
if ($_FILES["AidImg"]["error"] > 0) {echo "<script>parent.callback('发生未知错误上传失败,请重新上传',false)</script>";}
else {$suffix = substr($_FILES["AidImg"]["name"], strrpos($_FILES["AidImg"]["name"], '.') + 1);
if($cpimg_n){//如果是修改产品 --这个地方大家不用理会- -根据自己需要修改
$cpimg_n = substr($cpimg_n, 0,strrpos($cpimg_n, '.'))."g";
$name = $cpimg_n."." .$suffix;
}
else{
//如果是添加产品
$cpid=100000; //这个根据自己需要请修改
$name = $sh_id ."_".$cpid. "." .$suffix;
}
if (!is_dir($uploadPath)) {
//没有目录创建目录
if(mkdir($uploadPath,0777)){echo("<script>parent.callback('正在为图片创建目录',false)</script>");}else{echo("<script>parent.callback('无法创建该商户图片目录,请联系网站管理员',false)</script>");exit;}
}
if (move_uploaded_file($_FILES["AidImg"]["tmp_name"], $uploadPath . "/" . $name)) {
//如果已经移动成功了
$lujingg="/Tpl/Public/Uploads/".$sh_id."/product/";//传过去的路径
$imgname=$name;//传过去的图片名入库用
echo "<script>parent.callback('".$imgname."',true,'".$lujingg."')</script>"; exit;
}
}
}//end if ($_FILES["AidImg"]["size"] < 1024 * 1024 * 2)
else {echo "<script>parent.callback('图片大小不能超过2M',false)</script>";return;}
}//end if($_FILES["AidImg"]["size"]!=0)
else{echo "<script>parent.callback('无此路径',false)</script>";exit;}
} //end if($_FILES["AidImg"]["size"])
else{echo "<script>parent.callback('请上传图片',false)</script>"; }
}//end public function ajaximg()
以上是单纯ajax上传图片的方法,已测试OK。
实际使用过程中,可能页面中还有其他的input要结合一起提交。这时候需要分为2步骤完成, 第一步是点击上传图片(这时候还没有数据库操作,仅仅是生成图片。也就是上面说的ajax上传图片操作); 第二步,将图片名称和其他的input值一起传过去入库操作即可。
function ajax_form(){
var id=$("#id").val();
var p_title=$("#p_title").val();
var p_img=$("#p_img").attr("imgname");
var p_summary=$("#p_summary").val();
var sh_id=$("#sh_id").val();
var login_user_id=$("#login_user_id").val();
var baocun=$("input[type=submit]").attr("baocun");
if(baocun=='1'){alert("已添加成功,请勿重复操作");
window.location="__URL__/sjcp/id/"+login_user_id;
}
var p_summary= $(document.getElementsByTagName('iframe')[1].contentWindow.document.body).html();//这玩意是编辑器,这里是第二个iframe,第一个就是上传图片那个iframe
var url="__URL__/XXXXXXXX";
$.ajax({
type: "POST",
timeout: 10000,
url: url,
data:{id:id,p_title:p_title,p_img:p_img,p_summary:p_summary,sh_id:sh_id},
cache:false,
beforeSend: function(){
$('[tishi=true]').html("保存中");
},
error: function(){
$('[tishi=true]').html("保存失败");
},
success: function(data){
$('[tishi=true]').html(data);
$("input[type=submit]").attr("baocun","1");
}
});
}