PHP+Ajax+JS实现多图上传
本文实例在wap站项目中需要做一个ajax多图片上传,结合js插件做了一个,供大家参考,具体内容如下
/*ajax上传图片*/
varnum=0;
//点击删除图片
functiononDelete(num){
if($("#"+num).attr('src')!="__PUBLIC__/Home/images/jiazai.gif"&&$("#"+num).attr('src')!=""){
if(confirm("确认删除吗")){
$("#a"+num).remove();
}else{
//
}
}
}
$(function(){
$("#file0").bind("change",function(){
clickUpload(num);
});
functionclickUpload(num){
varimgObject=document.getElementById('file0');//文件对象
$("#yulan").append("<aid='a"+num+"'onclick='onDelete("+num+")'href='javascript:;'><imgid='"+num+"'width='75'height='75'src='__PUBLIC__/Home/images/jiazai.gif'/></a>");
//$("#yulan").append("<liid='a"+num+"'><imgid='"+num+"'src='__PUBLIC__/Home/images/jiazai.gif'/><ahref='javascript:;'onclick='onDelete("+num+")'>删除</a></li>");
vargetImageSrc=getFullPath(imgObject);//本地路径
//实例化image对象
varpos=getImageSrc.lastIndexOf(".");
varlastname=getImageSrc.substring(pos,getImageSrc.length)//图片后缀
if(lastname!=".jpg"&&lastname!=".png"&&lastname!=".jpeg"&&lastname!='.gif'){
$("#a"+num).remove();
alert("请选择一张图片");
}else{
ajaxFileUpload(num);
$("#file0").unbind("change").bind("change",function(){
clickUpload(num);
});
}
num++;
}
functiongetFullPath(obj){//得到图片的完整路径
if(obj){
if(window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
returndocument.selection.createRange().text;
}elseif(window.navigator.userAgent.indexOf("Firefox")>=1){
if(obj.files){
returnobj.files.item(0).getAsDataURL();
}
returnobj.value;
}
returnobj.value;
}
}
functionajaxFileUpload(num){
$.ajaxFileUpload
(
{
url:'http://xxxx/updateImg',//用于文件上传的服务器端请求地址
secureuri:false,//是否需要安全协议,一般设置为false
fileElementId:'file0',//文件上传域的ID
dataType:'json',//返回值类型一般设置为json
success:function(data)//服务器成功响应处理函数
{
varjsonText=data;
console.log(jsonText);
if(jsonText['status']==1){
if(jsonText['info']!=""){
console.log(jsonText['info']);
$("#"+num).attr("src","__PUBLIC__//Admin/Upload/"+jsonText['info']);
varimages=$("#img").val();
if(images!=""){
$("#img").val(images+","+jsonText['info']);
}else{
$("#img").val(images+""+jsonText['info']);
}
}
}else{
$("#a"+num).remove();
//alert("图片上传失败");
}
},
error:function(data,e)//服务器响应失败处理函数
{
alert(e);
}
}
)
}
});
以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。