移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K

 <!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script src="dist/lrz.bundle.js" type="text/javascript"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3> <input type="file" id="payfile" name="myfile" onchange="fileChange(this)" /> </form>
<script>
function fileChange(that){
var path =$("#ctx").val();
var filepath=$(that).val();
if(filepath==""){
return;
}
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(ext.toUpperCase())==-1){
alert("只允许上传jpg、png、bmp、jpeg格式的图片");
return false;
}
//以图片宽度为800进行压缩
lrz(that.files[0],{
width: 800
})
.then(function (rst){
//压缩后异步上传
$.ajax({
url : "http://192.168.1.168/storage/pages/AnJuKe/up.htm",
type: "POST",
data : {
imgdata:rst.base64//压缩后的base值
},
dataType:"json",
cache:false,
async:false,
success : function(data) {
if(data.success){
alert(data.message);///data.message为上传成功后的文件路径
}else{
alert(data.message);///data.message为上传失败原因
}
},
error:function(){
alert("上传失败");
}
});
});
}
</script>
</body>
</html>

Demo.html

 /**
* 文件上传
* @throws IOException
*/
public ModelAndView up(HttpServletRequest request,HttpServletResponse response) throws IOException {
String imgdata = request.getParameter("imgdata");
FileOutputStream outputStream=null;
try {
String basePath = request.getRealPath("/upload");
String imgPath=basePath+"/test1.jpg";
// new一个文件对象用来保存图片
File imageFile = new File(imgPath);
// 创建输出流
outputStream = new FileOutputStream(imageFile);
// 获得图片文件流
byte[] result = Base64.decodeBase64(imgdata.split(",")[1].getBytes());//解码
for (int i = 0; i < result.length; ++i) {
if (result[i] < 0) {// 调整异常数据
result[i] += 256;
}
}
outputStream.write(result);
} catch (Exception e) {
}finally{
outputStream.flush();
outputStream.close();
}
return null;
}

java Code

js下载

需要jar

commons-codec-1.10.jar

异步上传&预览图片-压缩图片的更多相关文章

  1. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  2. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  3. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  4. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  5. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  6. 图片上传预览转压缩并转base64详解(dShowImg64.js)

    hello,大家好,游戏开始了,欢迎大家收看这一期的讲解.本次的内容是图片的上传预览.最后发源码链接.废话不多说,先上图. 待上传图像 点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传 ...

  7. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  8. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  9. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

随机推荐

  1. 多Y轴,下拉框渲染,相同类型不同数据

    放上json文件: { "2017年3月": { "outKou": "5525.86", "inKou": " ...

  2. python删除数组中元素

    有数组a,要求去掉a所有为0的元素 a = [2,4,0,8,9,10,100,0,9,7] Filter a= filter(None, a) Lambada a = filter(lambda x ...

  3. DiffUtil和LiveData使用时遇到的问题

    android在28之后换成了androidx,在此之前也可以用到这些功能,不过是引入的包不同,写法也有一些小的差别.我们之前的代码使用的是BaseQuickAdapter,所以不可以直接使用JetP ...

  4. python3 调用zabbix API实现批量增加删除主机,主机各种监控项------实战

    在以前的博客中谈到了利用zabbix接口来对主机进行批量的增删改查 这里在不用环境中实战遇到了不同问题,这里记录下来以便后续review 以下为实战中获取token的代码,在zabbix标准接口文档中 ...

  5. (转)Python3.X如何下载安装urllib2包 ?

    python 3.X版本是不需要安装:urllib2包的,urllib和urllib2包集合成在一个包了那现在问题是:在python3.x版本中,如何使用:urllib2.urlopen()? 答:i ...

  6. Spark写入HBase(Bulk方式)

    在使用Spark时经常需要把数据落入HBase中,如果使用普通的Java API,写入会速度很慢.还好Spark提供了Bulk写入方式的接口.那么Bulk写入与普通写入相比有什么优势呢? BulkLo ...

  7. ERA-interim数据下载

    步骤: 1.python 2.ECWMF账号和密码:编写.ecmwfapirc文件,放置在C:\Users\用户名 目录下,内容: { "url" : "http...& ...

  8. 2019-2020-1 20199319《Linux内核原理与分析》第八周作业

    可执行程序工作原理 ELF目标文件格式 1.目标文件(ABI,应用程序二进制接口):编译器生成的文件. 2.目标文件的格式:out格式.COFF格式.PE(windows)格式.ELF(Linux)格 ...

  9. Spring笔记之配置数据源

    任何DAO访问数据库,最开始都需要配置数据源,数据源中定义了访问数据库的常用配置.有了数据源才能创建数据模板,然后把数据模板注入到DAO中,通过调用数据访问模板中的相应方法来对数据库进行相关操作. 常 ...

  10. Codeforces Round #581 (Div. 2) C. Anna, Svyatoslav and Maps (Floyd 算法,最短路)

    C. Anna, Svyatoslav and Maps time limit per test2 seconds memory limit per test256 megabytes inputst ...