jquery图片上传功能

标签：jquery图片上传功能

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

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

上传图片的代码：

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

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

    产品相册
     
    
        
        
        " name="goodsimg" />
        
        
            
        
    

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

    企业证书
     
    
        
        
        " name="Certiimg" />
        

            
                    


                        
                            
                        
                    
                    
        
    

上传的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));

本文出自 “kangjunfei” 博客，转载请与作者联系！

jquery图片上传功能

标签：jquery图片上传功能

原文地址：http://kangjunfei.blog.51cto.com/11556647/1973847