移动端上传图片（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();
   });

   4、提交数据
   判断需要填写的参数是否为空，如果不为空直接往下走，直到成功提交数据。

心得

在做这个项目的时候，最头疼的地方，应该就是传输图片了，因为如果过大的图片变成64编码，会数据量巨大，传输过慢，我的处理方式是在上传的时候先把图片进行压缩，压缩的不是尺寸，是分辨率。
优点：确实提高上传速度。
缺点：后台查看提交的图片，模糊不清晰。

更好的方法我也没有想到，希望大家可以一起探讨。