jquery圖片上傳功能

關(guān)于jquery圖片上傳功能呢，我引入了

jquery.min.js
jquery-1.8.3.min.js
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js

上傳圖片的代碼：

圖片上傳成功之后，可以選擇刪除！里面的變量就是我從數(shù)據(jù)庫查出來的，數(shù)據(jù)庫當(dāng)然存放的是圖片的路徑了！

<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">產(chǎn)品相冊</td>
    <td bgcolor="#f2f2f2">&nbsp;</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'];?>" 
         id="goodsimg" />
        <a  
        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">企業(yè)證書</td>
    <td bgcolor="#f2f2f2">&nbsp;</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所以我要把數(shù)據(jù)庫里存放的字符串轉(zhuǎn)換成數(shù)組然后遍歷出來
            $Certificate = $result['Certificate'];
            if(!empty($Certificate)){
                $Certificatearr = explode("|",$Certificate);
                foreach($Certificatearr as $row){
                    ?>
                    <li><img src="<?php echo $row; ?>"  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+'"  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文件就是上傳圖片后臺代碼處理圖片的地址
結(jié)合上傳圖片的地方來寫此部分
$fileExtArr = explode(".",$_FILES['_goodsFile']['name']);
$fileExt = ".".$fileExtArr[1];
//圖片存放地址進(jìn)行名字隨機(jī)給處理
$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));