jquery图片上传功能

关于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">&nbsp;</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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<?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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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">&nbsp;</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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<?php echo $row; ?>" style=" width:100px; height:100px; margin:10px; display:block;" id="Certificateimg" />                        <a class="delCertificateimg" href="javascript:void(0)">                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'+data.result.img+'"  id="Certificateimg" /><a class="delCertificateimg" href="javascript:void(0)"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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));