关于jquery图片上传功能呢,我引入了
jquery.min.js jquery-1.8.3.min.js jquery.ui.widget.js jquery.iframe-transport.js jquery.fileupload.js
上传图片的代码:
图片上传成功之后,可以选择删除!里面的变量就是我从数据库查出来的,数据库当然存放的是图片的路径了!
<style> .goodsimgupload img { border: 3px #efefed solid; cursor: pointer; } ul{ list-style:none; } .Certificate ul li{ width:130px; overflow:hidden; float:left; } .Certificate .delCertificateimg{ position:relative; left:36px; display:block; float:left; } </style> 这是单张图片上传的html代码 <tr> <td height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">产品相册</td> <td bgcolor="#f2f2f2"> </td> <td width="32%" height="30" bgcolor="#f2f2f2" class="goodsimgupload"> <input id="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"> <span id="uploadPercent"></span> <input type="hidden" value="<?php echo $result['goodsimg'];?>" name="goodsimg" /> <img src="<?php echo $result['goodsimg'];?>" style=" width:100px; height:100px; margin:10px; display:none;" id="goodsimg" /> <a style="position:relative; left:45px; display:none;" class="delgoodsimg" href="javascript:void(0)"> <img src="./p_w_picpaths/sign_cacel.png" title="删除" alt="删除"> </a> </td> </tr> 这是多张图片上传的html代码 <tr> <td height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">企业证书</td> <td bgcolor="#f2f2f2"> </td> <td width="32%" height="30" bgcolor="#f2f2f2" class="Certificate"> <input id="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"> <span id="uploadPercent"></span> <input type="hidden" value="<?php echo $result['Certificate']?>" name="Certiimg" /> <ul class="Certidom"> <?php //多张图片由于存放的是多条url所以我要把数据库里存放的字符串转换成数组然后遍历出来 $Certificate = $result['Certificate']; if(!empty($Certificate)){ $Certificatearr = explode("|",$Certificate); foreach($Certificatearr as $row){ ?> <li><img src="<?php echo $row; ?>" style=" width:100px; height:100px; margin:10px; display:block;" id="Certificateimg" /> <a class="delCertificateimg" href="javascript:void(0)"> <img src="./p_w_picpaths/sign_cacel.png" title="删除" alt="删除"> </a> </li> <?php } } ?> </ul> </td> </tr>
上传的js代码:
$(function (){ var goodsimg = $("#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(){ var delindex = $(this).parents("li").length; var Certiimgval = $("input[name='Certiimg']").val(); var Certiimgarr = 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) { var progress = 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张,请删除一张图片后重新上传"); return false; } var certidom = '<li><img src="'+data.result.img+'" style=" width:100px; height:100px; margin:10px; display:block;" id="Certificateimg" /><a class="delCertificateimg" href="javascript:void(0)"><img src="./p_w_picpaths/sign_cacel.png" title="删除" alt="删除"></a></li>'; $(".Certidom").append(certidom); /*uploadPicCallback(data.result);*/ var Certiimgval = $("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) { var progress = 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); echo json_encode(array("flag"=>1,"img"=>"..".$path));