使用localResizeIMG插件上傳圖片到七牛雲返回鏈接通過PHP進行保存

1.基本配置

    <!--圖片上傳插件-->
    <script 

type="text/javascript" 

src="

/exts

/jquery.min.js?v=2.1.4"></script>

<script type="text/javascript" src="/exts/jquery.masonry.min.js?1"></script>

    <script type="text/javascript" src="/exts/exif.js?1"></script>    

    <script type="text/javascript" src="/exts/binaryajax.js?1"></script>    

    <script type="text/vbscript">        

    Function IEBinary_getByteAt(strBinary, iOffset)         

    IEBinary_getByteAt = AscB(MidB(strBinary, iOffset + 1, 1))        

    End Function        

    Function IEBinary_getBytesAt(strBinary, iOffset, iLength)        

    Dim aBytes()        

    ReDim aBytes(iLength - 1)        

    For i = 0 To iLength - 1        

    aBytes(i) = IEBinary_getByteAt(strBinary, iOffset + i)        

    Next        

    IEBinary_getBytesAt = aBytes        

    End Function        

    Function IEBinary_getLength(strBinary)        

    IEBinary_getLength = LenB(strBinary)        

    End Function    

</script>    

<script type="text/javascript" src="/exts/localResizeIMG2.js"></script>    

<script type="text/javascript" src="/exts/mobileBUGFix.mini.js"></script>    

<!--圖片上傳插件-->

    附百度雲插件下載地址 	鏈接: https://pan.baidu.com/s/1dFKY3L3 密碼: euzv

2.html

<divclass="img-box">

<ulid="img-box"></ul>

        <div class="img upload-box">
          <!-- 以下是上傳按鈕 -->
          <input type="file"  id="upload_image" οnclick="shangchuan()"  class="file">
        </div>

   </div>

3.Js代碼

<script>
    function shangchuan() {

	
        var viewImg = $("#img-box");
        var imgurl = '';
        var imgcount = 0;
        var  num = 0;
        var  num = num-1;

         $('#upload_image').localResizeIMG({
         
            success: function (result) {
                var status = true;
                if (result.height > 1600) {
                    status = false;
                    alert("照片最大高度不超過1600像素");
                }
                if (viewImg.find("li").length > 4) {
                    status = false;
                    layer.msg('最多上傳5張圖片');
                }
                if (status) {
                    viewImg.append('<li style="float: left" class="imglist"><span class="pic_time"><span class="p_img"></span><em>50%</em></span></li>');
                    viewImg.find("li:last-child").html('<img class="img" src="' + result.base64 + '"/><span class="del"><img style="margin-left: -10px;width: 20px;height: 20px"  src="/exts/del.png"></span>'
                        +'<input type="hidden" id="file'+
                        + imgcount
                        + '" name="fileup[]" class="imginput" value="">');

                    $(".del").on("click",function(){
                        $(this).parent('li').remove();
                    });

                    var box = [];
                    /*上傳到七牛雲*/
                    var picBase = result.base64;
                    /*picBase是base64圖片帶頭部的完整編碼*/
                    var qiniu =   function putb64(picBase){

                        /*picUrl用來存儲返回來的url*/
                        var picUrl;

                        /*/!*把頭部的data:image/png;base64,去掉。（注意：base64後面的逗號也去掉）*!/*/
                        picBase=picBase.substring(23);

                        function fileSize(str)
                        {
                            var fileSize;
                            if(str.indexOf('=')>0)
                            {
                                var indexOf=str.indexOf('=');
                                str=str.substring(0,indexOf);//把末尾的’=‘號去掉
                            }

                            fileSize=parseInt(str.length-(str.length/8)*2);
                            return fileSize;
                        }
                        /*把字符串轉換成json*/
                        function strToJson(str)
                        {
                            var json = eval('(' + str + ')');
                            return json;
                        }

                        var url = "http://upload-z2.qiniu.com/putb64/"+fileSize(picBase);

                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange=function()
                        {
                            if (xhr.readyState==4){
                                var keyText=xhr.responseText;


                                /*返回的key是字符串，需要裝換成json*/
                                keyText=strToJson(keyText);

                                /*例如 http://ojvh6i96g.bkt.clouddn.com/ ，keyText.key 是返回的圖片文件名*/
                                picUrl="七牛雲空間網址"+keyText.key;
                                var  id  ='#file'+num;
                                $(id).val(picUrl);

                            }
                        }
                        xhr.open("POST", url, true);
                        xhr.setRequestHeader("Content-Type", "application/octet-stream");
                        xhr.setRequestHeader("Authorization", "UpToken Uptoken");
				/*此處uptoken可在 http://pchou.qiniudn.com/qiniutool/uptoken.html 進行設置 */
                        xhr.send(picBase);

                    }
                    imgcount++;
                    num++;
                    /*通過base64編碼字符流計算文件流大小函數*/
                    qiniu(picBase);

                }
            }
        });

    }
</script>  <!--圖片上傳-->

4.Js取值

   if(0 == $("#img-box").find("li").length){
      Page.alert('請選擇圖片');
      return false;
    }
   var inputObj = $(".imginput");
   var imgStr = "";
   $.each(inputObj,function(k,v){
      imgStr += v.defaultValue+",";
    });
  $.post('{:url("")}',
    {
        
        img:imgStr,
       
    },
    function(data){
        if(data.status==1) {
            layer.msg(data.message);
            setTimeout(function () {
                window.location.href = ‘’
            }, 2000);
        }else{
            layer.msg(data.message);
        }
    },'json');

5.PHP保存

function insert_img($img){

    
    $imgArr = $img;
    $imgArr = explode(',', $imgArr);
    $imgArr = array_filter($imgArr);

    //構造二維數組
    $imgblank = [];
    foreach ($imgArr as $v) {
        $imgs['img']=$v;
        $imgObj->insert($imgs);
    }
}