移動端上傳圖片（ajax跨域請求）

第一次寫項目開發經驗，望擔待。
除了前端之外的事就不叨叨了，下面開始弄乾活（兩個頁面首頁、列表頁）。

項目

開發簡述

項目需求：上傳圖片並展現。
項目地址：項目的連接地址
開發工具：sublime
後臺：java
開發語言：JavaScript（jq）
項目運用到的技術：css3+html5+jquery+ajax jsonp

---

html部分

重點說一下這兩個地方：

作了一個li，裏面放一個span用來作數字標題，再用border-radius作圓角，寫一個寬度，要定死寬和高，在用字體居中和浮動向左，就OK了；

重點說一下上傳圖片這個地址，由於需求，領導不喜歡原生的上傳圖片按鈕，須要放本身作的上傳按鈕，我在最外頭套了一個label裏面放了input和圖片。作input是爲了給後臺傳值。

<li>
    <span>上傳截圖</span>
    <div class="imgbox">
        <ul id="imageBoxz">
            <li class="pList"><input type="hidden" name="screenshot" id="screenshot" value="" /></li>
        </ul>
        <label class="btn-file zheng" data-role="add">
            <img class="upImg" src="images/upLoadImg.png" alt="">
            <input style="display:none;" class="fileImgBox" type="file" id="filesInputz" accept="image/*" >
        </label>
        <div class="clear"></div>
        <p class="appAndBox">該功能僅支持流量咪1.5.0以上版本,安卓操做系統4.4以上版本,請先升級！</p>
    </div>
    <div class="clear"></div>
</li>

js代碼部分

1. 識別操做系統

   • 由於項目需求，須要判斷安卓仍是蘋果系統，若是蘋果系統在應用市場的地方添加上App Store

   • 判斷的方法爲瀏覽器標頭，window.navigator.userAgent查找設備核心關鍵字。

2. 獲取頁面連接地址中的參數,這個function getQueryString(name)是我用的獲取連接地址參數方法正則表達式。

   function getQueryString(name) { 
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
       var r = window.location.search.substr(1).match(reg); 
       if (r != null) return unescape(r[2]); return null; 
   }

3. 上傳圖片
   須要把圖片變成64編碼，進行傳輸。ajax1()爲請求數據，這裏不展現了。功能其實就是發送數據到後臺，後臺接受並返回參數。在說一點爲何要把請求放到傳輸圖片這裏，由於把圖片和相應的參數在最後提交按鈕那上傳，須要上傳的時間過長，因此把圖片單獨摘出來上傳。（圖片編譯成64編碼，數據過大，在手機上傳輸的時候，很費時間，影響用戶體驗。）

   //上傳圖片
   $('#filesInputz').change(function(){
       var file = this.files[0]; //選擇上傳的文件
       var r = new FileReader();
       r.readAsDataURL(file); //Base64
       $(r).load(function(){
           $("#imageBoxz").html('<li class="pList">'+'<img src="'+ this.result +'" alt="評論截圖" />'
           +'<input type="hidden" name="screenshot" id="screenshot" value="'+ this.result +'" />'+'</li>');
       });
       $(".zheng").css("opacity","0");
       $(".zheng").attr("title","點擊更換");
       $(".zhengImg").css("display","none");
       $(".loading,#mask").show();
       ajax1();
   });

   四、提交數據
   判斷須要填寫的參數是否爲空，若是不爲空直接往下走，直到成功提交數據。

心得

在作這個項目的時候，最頭疼的地方，應該就是傳輸圖片了，由於若是過大的圖片變成64編碼，會數據量巨大，傳輸過慢，個人處理方式是在上傳的時候先把圖片進行壓縮，壓縮的不是尺寸，是分辨率。
優勢：確實提升上傳速度。
缺點：後臺查看提交的圖片，模糊不清晰。

更好的方法我也沒有想到，但願你們能夠一塊兒探討。