標籤：
因為最近一段時間，一直在弄項目，其中涉及到了證件上傳的功能，剛開始的時候一點頭緒都沒有，上網查了很多資料，QQ群裡面也問了不少人，很多人說如果是app程式，可以申請系統許可權，然後再去調用系統底層的東西，但是是在瀏覽器裡面操作的，我們自訂的頁面也是通過內建瀏覽器開啟的，而且瀏覽器在內部進行了很多特殊處理，屏蔽了很多東西，所以要在頁面調用拍照功能或者是開啟手機系統的圖庫目錄是不可能的，當然，這些都只是大伙兒理論上的猜測而已，而在我查了兩天的資料之後，發現這個問題原來是可以解決的，而且實現的過程居然也很簡單。只是用到了HTML5的file檔案上傳功能，再配合canvas即可。下面附上原始碼：[java] view plain copy print?在CODE上查看代碼片派生到My Code片<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html> <html lang="zh-CN"> <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=yes"> <head> <meta charset="UTF-8"> <title>上傳證件</title> <style> body { margin: 20px 20%; color:#777; text-align: center; } #result{ margin-top: 20px; } </style> </head> <body> <h1 class="text-center">上傳證件...</h1> <hr/> <input type="file"/> <div id="result" align="center"></div> <hr/> <!-- 引入jQuery --> <script type="text/javascript" src="../js/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../js/LocalResizeIMG.js"></script> <!-- mobileBUGFix.js 相容修複行動裝置 --> <script src="../js/mobileBUGFix.mini.js" type="text/javascript"></script> <script type="text/javascript"> $("input:file").localResizeIMG({ width: 500, quality: 0.8, success: function (result) { var img = new Image(); img.src = result.base64; console.log(result.clearBase64); //$("body").append(img); $("#result").empty(); $("#result").append(img); //呈現映像(拍照結果) $.ajax({ url: "upLoadImageServlet", type: "POST", data:{formFile:result.clearBase64}, dataType: "HTML", timeout: 1000, error: function(){ alert("Error loading PHP document"); }, success: function(result){ //alert(result); //console.log(result); alert("Uploads success~") } }); } }); </script> </body> </html></span> 上面實現的流程導致是這樣的，首先在前端把圖片進行壓縮，因為手機的不同，可能有的手機拍照給力，像素高，拍出來的圖片的大小就相對大一些，所以這裡通過一個外掛程式進行了壓縮，然後轉換成為Base64的編碼，再把Base64的編碼使用AJAX來POST到伺服器，然後在Java或者PHP後台進行Base64解碼，解出來的路徑即為上傳圖片的路徑地址，然後再進行儲存，寫到檔案或者資料庫裡面。此外，這裡需要說明一個問題：很多人都說到了內建瀏覽器，之前我也一直認為內建瀏覽器就是自己開發的一套瀏覽器，然後對很多東西進行了限制。其實不是這樣的，本身並沒有再重新開發一套瀏覽器，而是調用的系統自身的瀏覽器，是根據手機的不同系統而變化的。內建瀏覽器調用的是手機系統預設瀏覽器，ios和Android系統預設瀏覽器都是webkit核心，只是對HTML5和CSS3的支援程度可能不同。因為瀏覽器只是系統的一部分，因此系統預設瀏覽器不會單獨升級，對HTM5、CSS3的支援程度與系統版本有很大關係。安卓版直接調用系統瀏覽器核心, iOS則是調用safari,大家可以看到下面1和3的效果是一模一樣的，1是瀏覽器開啟的，3則是魅族MX 3內建的系統瀏覽器開啟的效果。上面我的我都測試過了，可以正常運行。下面附上幾張照片：1、這是在裡面開啟的效果2、這是在手機UC瀏覽器開啟的效果：3、這個是在系統內建瀏覽器裡面開啟的效果（ps:My Phone是魅族MX 3），但是這個不是開啟系統圖庫目錄，而是直接定位到了系統的檔案夾根目錄。
移動端手機上傳圖片處理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
