91亚洲精华国内精华精华液_国产高清在线精品一区不卡_精品特级一级毛片免费观看_欧美日韩中文制服有码_亚洲精品无码你懂的网站369

在網(wǎng)站W(wǎng)EB端及封裝APP網(wǎng)站做手機(jī)上傳圖片預(yù)覽特別是蘋(píng)果手機(jī)選擇圖片時(shí)，有拍照?qǐng)D片選擇，一般HTML file表無(wú)法獲得用戶臨時(shí)拍照的圖片，這時(shí)可以用html5+jquery+canvas來(lái)實(shí)現(xiàn)，廢話不多說(shuō)貼代碼。

    (function($){
            $.fn.extend({
                aiiUpload:function(obj)
                {
                    if(typeof obj !="object")
                    {
                        alert('參數(shù)錯(cuò)誤');
                        return;
                    }
                    var imageWidth,imageHeight;
                    var base64;
                    var file_num=0;
                    var fileInput=$(this);
                    var fileInputId=fileInput.attr('id');
                    createDoc('#'+fileInputId,obj.method,obj.action);
                    $('#aii_file').change(function(){
                        if(test(this.value)==false)
                        {
                            alert('格式錯(cuò)誤');
                            return;
                        }
                        var objUrl = getObjectURL(this.files[0]);
                        if (objUrl) 
                        {
                            imgBefore(objUrl,file_num);
                            render(objUrl,obj.max_h,obj.max_w,file_num);
                            file_num++;
                        }
                    });
                }
            });
            function createDoc(objID,form_method,form_action)
            {
                var element=$(objID);
                element.append('<ul class="viewList"></ul>').append('<div class="fileBox"><input type="file"  id="aii_file" /><div class="file_bg"></div></div>').append('<form id="aii_upload_form" method="'+form_method+'" action="'+form_action+'"></form>').append('<canvas id="canvas"></canvas>');
            }
            function test(value)
            {
                var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g');
                return regexp.test(value);
            }
            function render(src,MaximgW,MaximgH,idnum)
            {
                var image=new Image();
                image.onload=function()
                {
                    var canvas=document.getElementById('canvas');
                    if(image.width>image.height)
                    {
                        imageWidth=MaximgW;
                        imageHeight=MaximgH*(image.height/image.width);
                    }
                    else if(image.width<image.height)
                    {
                        imageHeight=MaximgH;
                        imageWidth=MaximgW*(image.width/image.height);
                    }
                    else
                    {
                        imageWidth=MaximgW;
                        imageHeight=MaximgH;
                    }
                    canvas.width=imageWidth;
                    canvas.height=imageHeight;
                    var con=canvas.getContext('2d');
                    con.clearRect(0,0,canvas.width,canvas.height);
                    con.drawImage(image,0,0,imageWidth,imageHeight);
                    base64=canvas.toDataURL('image/jpeg',0.5).substr(22);
                    add_doc(base64,idnum);
                }
                image.src=src;
            };
            //建立一個(gè)可存取到該file的url
            function getObjectURL(file) {
                var url = null ; 
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ; 
            }
            //預(yù)覽
            function imgBefore(objUrl,idnum) 
            {
                var li='<li class="view"><img src="'+objUrl+'" id="aiiImg_'+idnum+'" idnum="'+idnum+'" /><div class="close" onclick="img_remove(this);"></div></li>'
                $('.viewList').append(li);
                var img=$('#aiiImg_'+idnum);
                //預(yù)覽圖片居中 填滿 代碼
                console.log('asdfasdfasdf');
 
                img.load(function(){
                    var imgw=img.width(),
                        imgh=img.height();
                        console.log(imgw);
                        console.log(imgh);
                    if(imgw>imgh)
                    {
                        img.css('height','100%');
                        img.css('width','auto');
                        img.css('marginLeft',-(img.width()-img.height())/2+'px');
                    }
                    else if(imgw<imgh)
                    {
                        img.css('width','100%');
                        img.css('height','auto');
                        img.css('marginTop',-(img.height()-img.width())/2+'px');
                    }
                });
            }
 
            function add_doc (base,idnum)
            {
                $('#aii_upload_form').append('<input type="hidden" name="img[]" id="f_'+idnum+'" value="'+base+'"/>');
            }
        })(jQuery);
        function img_remove(element)
        {
            var num=$(element).prev().attr('idnum');
            $(element).parent().remove();
            $('#f_'+num).remove();
            console.log('asdf');
        }
 

以上是需要用到的JQUERY 下面是調(diào)用該jquery及我們點(diǎn)擊上傳圖片并預(yù)覽圖片代碼

<section class="section">  

    <div id="box"></div> 
    <p style="color:red;">*樣式修改請(qǐng)參考aiiUpload.css</p>
</section>  
 
<script type="text/javascript">  
    $('#box').aiiUpload({  
        method:'POST',  
        action:'form.php',  
        max_h:300,  
        max_w:300,  
        subText:'上傳圖片',  
        fileText:'選擇圖片'  
    });  
</script>  
查找 “add_doc(base64,idnum);”我們可以在上面添加自己的Ajax代碼如
$.post("action.php?user_id={$user_id}&member_user=member_img",{base64:base64},function(msg){  })
其中“base64”是我們的圖片文件，然后我們需要在PHP程序中處理獲取到的圖片文件
$base64 = $_REQUEST['base64'];  //獲取圖片碼
$IMG = base64_decode($base64);  //將獲取到的圖片碼轉(zhuǎn)義
 
$rand = rand(100, 999);
$pics_tow = date("YmdHis") . $rand . '.png';  //進(jìn)行文件重命名
$pic_path_tow = "files/". $pics_tow;   //文件路徑控制
file_put_contents($pic_path_tow, $IMG);  //將轉(zhuǎn)義過(guò)的字符串寫(xiě)入指定路徑下
將我們獲取到的文件名進(jìn)行數(shù)據(jù)操作！
這樣從手機(jī)拍照的圖片就可以獲取并存入服務(wù)器及數(shù)據(jù)庫(kù)中了！

 

穩(wěn)定

產(chǎn)品高可用性高并發(fā)

貼心

項(xiàng)目群及時(shí)溝通

專業(yè)

產(chǎn)品經(jīng)理1v1支持

快速

MVP模式小步快跑

承諾

我們選擇聲譽(yù)

堅(jiān)持

10年專注高端品質(zhì)開(kāi)發(fā)
  • 返回頂部