第一次寫項目開發經驗，望擔待。

除了前端以外的事就不叨叨了，下面開始弄干活(兩個頁面首頁、列表頁)。

項目

開發簡述

項目需求：上傳圖片并展示。

項目地址：項目的鏈接地址

開發工具：sublime

后臺：java

開發語言：JavaScript(jq)

項目運用到的技術：css3+html5+jquery+ajax jsonp

html部分

重點說一下這兩個地方：

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

重點說一下上傳圖片這個地址，因為需求，領導不喜歡原生的上傳圖片按鈕，需要放自己做的上傳按鈕，我在最外頭套了一個label里面放了input和圖片。做input是為了給后臺傳值。

上傳截圖

該功能僅支持流量咪1.5.0以上版本,安卓操作系統4.4以上版本,請先升級！

js代碼部分

識別操作系統

因為項目需求，需要判斷安卓還是蘋果系統，如果蘋果系統在應用市場的地方添加上App Store

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

獲取頁面鏈接地址中的參數,這個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;

}

上傳圖片

需要把圖片變成64編碼，進行傳輸。ajax1()為請求數據，這里不展示了。功能其實就是發送數據到后臺，后臺接受并返回參數。在說一點為什么要把請求放到傳輸圖片這里，因為把圖片和相應的參數在最后提交按鈕那上傳，需要上傳的時間過長，所以把圖片單獨摘出來上傳。(圖片編譯成64編碼，數據過大，在手機上傳輸的時候，很費時間，影響用戶體驗。)

//上傳圖片

$('#filesInputz').change(function(){

var file = this.files[0]; //選擇上傳的文件

var r = new FileReader();

r.readAsDataURL(file); //Base64

$(r).load(function(){

$("#imageBoxz").html('

'+''

+''+'

');

});

$(".zheng").css("opacity","0");

$(".zheng").attr("title","點擊更換");

$(".zhengImg").css("display","none");

$(".loading,#mask").show();

ajax1();

});

4、提交數據

判斷需要填寫的參數是否為空，如果不為空直接往下走，直到成功提交數據。

心得

在做這個項目的時候，最頭疼的地方，應該就是傳輸圖片了，因為如果過大的圖片變成64編碼，會數據量巨大，傳輸過慢，我的處理方式是在上傳的時候先把圖片進行壓縮，壓縮的不是尺寸，是分辨率。

優點：確實提高上傳速度。

缺點：后臺查看提交的圖片，模糊不清晰。

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

總結

以上是生活随笔為你收集整理的java 移动页面中的图片上传_移动端上传图片（ajax跨域请求）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。