关于jquery图片上传功能呢,我引入了

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

上传图片的代码:

图片上传成功之后,可以选择删除!里面的变量就是我从数据库查出来的,数据库当然存放的是图片的路径了!


这是单张图片上传的html代码

    产品相册
     
    
        
        
        " name="goodsimg" />
        " 
        style=" width:100px; height:100px; margin:10px; display:none;" id="goodsimg" />
        
            
        
    

这是多张图片上传的html代码

    企业证书
     
    
        
        
        " name="Certiimg" />
        
            
                    
  • " style=" width:100px; height:100px; margin:10px; display:block;" id="Certificateimg" />                                                                                                    
  •                                   

    上传的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 = '
  • ';                 $(".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+"%");         }     });     }); 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));