200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > java 移动页面中的图片上传_移动端上传图片(ajax跨域请求)

java 移动页面中的图片上传_移动端上传图片(ajax跨域请求)

时间:2023-07-18 15:03:39

相关推荐

java 移动页面中的图片上传_移动端上传图片(ajax跨域请求)

第一次写项目开发经验,望担待。

除了前端以外的事就不叨叨了,下面开始弄干活(两个页面首页、列表页)。

项目

开发简述

项目需求:上传图片并展示。

项目地址:项目的链接地址

开发工具: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编码,会数据量巨大,传输过慢,我的处理方式是在上传的时候先把图片进行压缩,压缩的不是尺寸,是分辨率。

优点:确实提高上传速度。

缺点:后台查看提交的图片,模糊不清晰。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。