jquery图片上传功能
关于jquery图片上传功能呢,我引入了
jquery.min.jsjquery-1.8.3.min.jsjquery.ui.widget.jsjquery.iframe-transport.jsjquery.fileupload.js
上传图片的代码:
图片上传成功之后,可以选择删除!里面的变量就是我从数据库查出来的,数据库当然存放的是图片的路径了!
<style>.goodsimguploadimg{border:3px#efefedsolid;cursor:pointer;}ul{list-style:none;}.Certificateulli{width:130px;overflow:hidden;float:left;}.Certificate.delCertificateimg{position:relative;left:36px;display:block;float:left;}</style>这是单张图片上传的html代码<tr><tdheight="30"align="right"bgcolor="#f2f2f2"class="left_txt2">产品相册</td><tdbgcolor="#f2f2f2"> </td><tdwidth="32%"height="30"bgcolor="#f2f2f2"class="goodsimgupload"><inputid="fileUpload"type="file"accept="p_w_picpath/png,p_w_picpath/gif,p_w_picpath/jpeg"name="_goodsFile"multiple=""data-url="../backend/actions/backend_upload_photo.php"><spanid="uploadPercent"></span><inputtype="hidden"value="<?phpecho$result['goodsimg'];?>"name="goodsimg"/><imgsrc="<?phpecho$result['goodsimg'];?>"id="goodsimg"/><aclass="delgoodsimg"href="javascript:void(0)"><imgsrc="./p_w_picpaths/sign_cacel.png"title="删除"alt="删除"></a></td></tr>这是多张图片上传的html代码<tr><tdheight="30"align="right"bgcolor="#f2f2f2"class="left_txt2">企业证书</td><tdbgcolor="#f2f2f2"> </td><tdwidth="32%"height="30"bgcolor="#f2f2f2"class="Certificate"><inputid="CertifileUpload"type="file"accept="p_w_picpath/png,p_w_picpath/gif,p_w_picpath/jpeg"name="_goodsFile"multiple=""data-url="../backend/actions/backend_upload_photo.php"><spanid="uploadPercent"></span><inputtype="hidden"value="<?phpecho$result['Certificate']?>"name="Certiimg"/><ulclass="Certidom"><?php//多张图片由于存放的是多条url所以我要把数据库里存放的字符串转换成数组然后遍历出来$Certificate=$result['Certificate'];if(!empty($Certificate)){$Certificatearr=explode("|",$Certificate);foreach($Certificatearras$row){?><li><imgsrc="<?phpecho$row;?>"id="Certificateimg"/><aclass="delCertificateimg"href="javascript:void(0)"><imgsrc="./p_w_picpaths/sign_cacel.png"title="删除"alt="删除"></a></li><?php}}?></ul></td></tr>
上传的js代码:
$(function(){vargoodsimg=$("#goodsimg").attr("src");//单张图片显示if(goodsimg!=""){$("#goodsimg").css("display","block");$(".delgoodsimg").css("display","block");}//单张图片删除$(".delgoodsimg").click(function(){$("input[name='goodsimg']").val("");$("#goodsimg").css("display","none").attr("src","");$(this).css("display","none");});//多条副$(".delCertificateimg").live('click',function(){vardelindex=$(this).parents("li").length;varCertiimgval=$("input[name='Certiimg']").val();varCertiimgarr=Certiimgval.split("|");Certiimgarr.pop();if(Certiimgarr.length==0){$("input[name='Certiimg']").val("");}else{Certiimgval=Certiimgarr.join("|");$("input[name='Certiimg']").val(Certiimgval);}$(this).parents("li").remove();});//jquery图片上传$('#fileUpload').fileupload({dataType:'json',done:function(e,data){if(data.result.flag==1&&data.result.img!=""){/*uploadPicCallback(data.result);*/$("input[name='goodsimg']").val(data.result.img);$("#goodsimg").css("display","block").attr("src",data.result.img);$(".delgoodsimg").css("display","block");}else{console.log("err");}},progressall:function(e,data){varprogress=parseInt(data.loaded/data.total*100);$('#uploadPercent').text("加载完成:"+progress+"%");}});//多图上传$('#CertifileUpload').fileupload({dataType:'json',done:function(e,data){if(data.result.flag==1&&data.result.img!=""){if($(".Certidom").find("li").length==2){alert("上传图片多于2张,请删除一张图片后重新上传");returnfalse;}varcertidom='<li><imgsrc="'+data.result.img+'"id="Certificateimg"/><aclass="delCertificateimg"href="javascript:void(0)"><imgsrc="./p_w_picpaths/sign_cacel.png"title="删除"alt="删除"></a></li>';$(".Certidom").append(certidom);/*uploadPicCallback(data.result);*/varCertiimgval=$("input[name='Certiimg']").val();if(Certiimgval==""){$("input[name='Certiimg']").val(data.result.img);}else{$("input[name='Certiimg']").val(Certiimgval+"|"+data.result.img);}}else{console.log("err");}},progressall:function(e,data){varprogress=parseInt(data.loaded/data.total*100);$('#uploadPercent').text("加载完成:"+progress+"%");}});});</script>backend_upload_photo.php文件就是上传图片后台代码处理图片的地址结合上传图片的地方来写此部分$fileExtArr=explode(".",$_FILES['_goodsFile']['name']);$fileExt=".".$fileExtArr[1];//图片存放地址进行名字随机给处理$path='/backend/actions/upload/'.time().md5($_FILES['_goodsFile']['name'].rand()).$fileExt;move_uploaded_file($_FILES['_goodsFile']['tmp_name'],$_SERVER['DOCUMENT_ROOT'].$path);echojson_encode(array("flag"=>1,"img"=>"..".$path));
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。