标签：jquery图片上传功能
关于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="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=\‘#\‘" />
<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=\‘#\‘" />
<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+‘" 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>‘;
$(".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));本文出自 “kangjunfei” 博客，转载请与作者联系！
标签：jquery图片上传功能
原文地址：http://kangjunfei.blog.51cto.com/11556647/1973847
