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编码,会数据量巨大,传输过慢,我的处理方式是在上传的时候先把图片进行压缩,压缩的不是尺寸,是分辨率。
优点:确实提高上传速度。
缺点:后台查看提交的图片,模糊不清晰。
更好的方法我也没有想到,希望大家可以一起探讨。
java 移动页面中的图片上传_移动端上传图片(ajax跨域请求)相关推荐
- java 移动页面中的图片上传_移动端图片操作——上传
上传我们一般都是用"input[type=file]"控件.当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象. 友情提示在,在Android手机webv ...
- java 移动页面中的图片上传_HTML5移动端图片上传(一)
上传我们一般都是用"input[type=file]"控件.当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象. 友情提示在,在Android手机webv ...
- ajax 文件上传 跨域,FormData解决ajax上传文件的问题及ajax跨域
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form ...
- Java 开发笔记 - wangEditor 编辑器图片上传
Java 开发笔记 - wangEditor 编辑器图片上传 前言 转型 java 开发后入手的第一个项目,写写博客记录一下 该项目使用的是 sping boot + mybatis plus + t ...
- java muti实现图片上传_使用MultipartFile实现文件上传
项目中会经常实现文件上传功能,比如在前台页面中设置上传文件按钮,后台保存文件至服务器,操作完成后前台展示上传结果,如上传成功或者上传失败信息.使用MultipartFile可以很容易的实现文件上传功能 ...
- Java实现模拟QQ空间图片上传
Java实现模拟QQ空间图片上传 首先看效果: 首先编写我们的上传jsp代码,如下: <%@ page language="java" contentType="t ...
- 详细阐述Web开发中的图片上传问题
Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...
- java 盖章透明_java实现图片上传后裁剪,把白色背景变成透明图(电子印章)
应用场景:企业在白纸上盖上印章,然后软件实现透明的电子印章,在后续业务流程中使用! A4纸-----------------------------------------处理后----------- ...
- Gitee+typora+picgo+插件,markdown图床配置,一键将markdown中本地图片上传至图床
一键将markdown中本地图片上传至图床 推荐配置:Gitee+typora+picgo+插件 文章目录 安装 picgo 配置 typora 配置 Gitee 图床 配置图床设置 配置 typor ...
最新文章
- LAMP--Apache 禁止指定 user_agent
- selenium之 chromedriver与chrome版本映射表(更新至v2.33)
- 《NLTK基础教程——用NLTK和Python库构建机器学习应用》——2.3 语句分离器
- C# 匿名委托、匿名方法、匿名对象、Lambda表达式
- 其实,大部分人都不需要你去培养
- Java日志记录最佳实践
- Thymeleaf基本知识
- 美国红帽软件公司是做什么的
- cl_salv_table
- SQL Server 2008 r2数据库可疑状态解决
- 2019IDEA破解安装
- js实现斗地主的算法 验证牌型 找大于上家的牌型
- python中object是什么_python object是什么类型
- 章文嵩坐镇淘宝双11流量作战室
- 安装docker遇到的坑
- Matlab之绘制瀑布图
- 中国数据量占全球27.8%!安防能否借机“回血”?
- 微信小程序列表首字母排序并根据字母定位
- 机器学习算法工程师面试学习经验
- 计算机网络——网络硬件和网络设备及其工作原理
热门文章
- c++ stl stack_C ++ STL中的stack :: push()函数
- 算法图解:如何找出栈中的最小值?
- 贪心---leetcode-376摆动序列
- 使用kibana或postman操作Elasticsearch的常用命令
- jvm 安装位置_简单了解JVM
- linux挂载硬盘的分区创建,Linux 新增硬盘、新建分区、格式化硬盘、挂载硬盘的操作...
- linux java no x11_在linux下运行javaMail程序报No X11 DISPLAY variable was...
- python 日志不会按照日期分割_python 按照日期切分大日志文件(重点)和按照指定大小切分日志文件...
- 中关村win11 32位全新官方版镜像v2021.07
- 联想sr950配置raid卡_联想ThinkServerrd服务器raid卡设置教程LSIiraid卡设置教程