关于jquery图片上传功能呢，我引入了
jquery.min.jsjquery-1.8.3.min.jsjquery.ui.widget.jsjquery.iframe-transport.jsjquery.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="image/png,image/gif,image/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="./images/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="image/png,image/gif,image/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="./images/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+'" id="Certificateimg" /><a class="delCertificateimg" href="javascript:void(0)"><img src="./images/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));
随时随地看视频
