jquery图片上传功能

Posted 2020-10-11

关于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">&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 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">&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 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” 博客，转载请与作者联系！