使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器
使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器
ajax上传主要使用了 var reader = new FileReader() 此方法
js图片压缩主要是利用canvas进行的
源码：
/**
* js使用form上传图片，支持本地预览选中的图片,支持携带自定义参数
* @param {string} params.previewImgId 预览图片控件id,可以预览上传图片
* @param {string} params.url 提交上传的url
* @param {function} params.success 上传接口的回调函数
* @param {boolean} params.params 上传时提交的其它参数 有几个传几个，系统会把 previewImgId url success 这三个参数过滤后的其它参数传给服务器
使用示例：
<img src="" id="yulan">
<div onclick="shangchuan()">上传</div>
function shangchuan(){
jsUploadImage({"diyparam":"1111","diyparam1":"222","previewImgId":"yulan","url":"user.php?act=photosave","success":function(data){
console.log(data);
}})
};
*/
function jsUploadImage(params){
//初始化数据
params.previewImgId = params.previewImgId || "";
params.url = params.url || "";
params.success = params.success || ""; //创建file上传控件
if(document.getElementById("imgFile")==null){
var inputEle=document.createElement("input"); //创建input
inputEle.id="imgFile";
inputEle.type="file";
inputEle.accept="image/png,image/jpeg,image/jpeg,DCIM/*;capture=camera";
inputEle.style="display:none;";
inputEle.onchange = function(){
showPhoto()
};
inputEle.multiple = false;
document.body.appendChild(inputEle);
}
var imgFile = document.getElementById("imgFile");
imgFile.click(); //选中文件后的预览图片
function showPhoto(){
//文件对象
var file = document.getElementById("imgFile").files[0]; //读取后辍,判断是否允许的文件
var fileSuffix = file.name.substring(file.name.length-4);
var allowFile = ".jpg|.png|.gif";
if(allowFile.indexOf(fileSuffix.toLowerCase())==-1) {
alert("请使用"+allowFile+"后辍的文件");
return false;
} //如果传了显示控件的id,显示本地预览
var reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = function(e){
var imgBase64Data = e.target.result; //显示预览
if("" != params.previewImgId) document.getElementById(params.previewImgId).src = imgBase64Data; //如果不压缩直接上传
//savePhoto(imgBase64Data) //对图片进行缩小处理,然后再上传
compressPhoto(imgBase64Data,1000,1000,function(imgBase64DataBack){
//提交服务保存数据
savePhoto(imgBase64DataBack)
}); } } //提交数据
function savePhoto(base64Data){
var formData = new FormData(); //加入其它参数
for(var key in params){
if(key!="previewImgId" && key!="url" && key!="success" ){
formData.append(key, params[key]);
}
}
//加入文件参数 利用base64
formData.append("imgFile",encodeURIComponent(base64Data));
//加入文件参数 file控件上传 , 但这种试就不支持对图片压缩了，所以手机端不采用这种方式
//formData.append('imgFile', file); //ajax上传
$.ajax({
url:params.url,
type: 'POST',
cache: false,
dataType:"json",
data: formData,
processData: false,
contentType: false
}).done(function(res) {
if(params.success!=""){
params.success(res);
}
}).fail(function(res) {
alert("上传失败");
});
} } /**
* js利用canvas对图像进行压缩处理
* @param {string} imgBase64Data 图像base64数据
* @param {string} maxWidth 最大高度
* @param {function} maxHeight 最大宽度
* @param {boolean} fun 回调函数，参数为处理后的图像数据
使用示例：
compressPhoto(imgBase64Data,maxWidth,maxHeight,function(imgBase64Data){
//返回图片数据后的处理
})
*/
function compressPhoto(imgBase64Data,maxWidth,maxHeight,fun){
var img = new Image(); // 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d'); // base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
} // canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight); var base=canvas.toDataURL("image/jpeg",0.7);//canvas转码为base64
fun(base);//返回处理
}; img.src = imgBase64Data;
}
使用示例：
<img src="" id="yulan">
<div onclick="shangchuan()">上传</div>
<script type="text/javascript">
function shangchuan(){
jsUploadImage({"diyparam":"1111","diyparam1":"222","previewImgId":"yulan","url":"user.php?act=photosave","success":function(data){
console.log(data);
}})
};
</script>
来源：jsfun.cn
http://www.jsfun.cn/#codecollect
使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器的更多相关文章
- 小程序踩坑记录-上传图片及canvas裁剪图片后上传至服务器
最近在写微信小程序的上传图片功能,趟过了一些坑记录一下. 想要满足的需求是,从手机端上传图片至服务器,为了避免图片过大影响传输效率,需要把图片裁剪至适当大小后再传输 主要思路是,通过wx.choose ...
- 支持无限加载的js图片画廊插件
natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...
- MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器
MVC图片上传.浏览.删除 1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...
- 前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器
之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端. 我的思路是:一.引用第三方js在前端把table转成图片 二.通过ajax把图片上传到服务器,保存在指定文件夹 ...
- HTML5 本地裁剪图片并上传至服务器（转）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- HTML5裁剪图片并上传至服务器实现原理讲解
HTML5裁剪图片并上传至服务器实现原理讲解 经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...
- js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- layui框架图片上传至服务器
注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...
- 项目分享五：H5图片压缩与上传
一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...
随机推荐
- jscript定时器,一直用的东西，你真的明白吗?
JavaScript定时器 JavaScript是一种解释型语言(边编译边执行),Js解析顺序是从上到下,然后将编译后的任务丢到一个事件队列中,然后事件内的函数会从上到下开始执行 setInterva ...
- [洛谷P2234][HNOI2002] 营业额统计 - Treap
Description Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额. ...
- tar磁带归档
一:压缩.解压 1.compress/uncompress/zcat -d:解压 -c:输出到终端,不删除原文件 -v:显示详细信息 2.gzip/ungzip/zcat -d:解压 -c:将压缩或解 ...
- SpringBoot(五)：@ConfigurationProperties配置参数绑定
在springmvc或其他ssh框架中如果我们要实现一个配置参数的加载,需要使用代码实现读取properties文件等操作,或者需要使用其他属性@value(name="username&q ...
- 框架学习之Spring(一IOC)----HelloWrod
一.概述 Spring是一个开源框架,它的核心是控制反转(IOC)和面向切面(AOP).简单来说,Spring是一个分层的JavaSE/EEfull-stack(一站式)轻量级开源框架. EE 开发分 ...
- js 中的栈和堆
js中的栈与堆的讲解/基本数据类型与引用类型的讲解 前言:1. 学习前端,入门简单,想学好确实是一件很困难的事情,东西多而且杂,版本快速迭代,产品框架层出不穷. 2. 前端学习成本确实很高,需要不断的 ...
- Linux服务器SSH无法通过DSA证书登录的解决方法
从openssh7.0开始,ssh-dss密钥被默认禁用. 修改服务器端的openssh设置重新开启 # vim /etc/sshd/sshd_config添加以下选项PubkeyAcceptedKe ...
- 3分钟搞掂Set集合
前言 声明,本文用的是jdk1.8 前面章节回顾: Collection总览 List集合就这么简单[源码剖析] Map集合.散列表.红黑树介绍 HashMap就是这么简单[源码剖析] LinkedH ...
- 扩展第二屏幕发生Out Of Range及扩展后耳机没声音解决方案
新年好\(^o^)/~ 拓展屏幕这种事情.其实很简单的.无非就分辨率跟刷新频率.有时候一接好就可以了.有时候怎么也弄不出来.我也是搞了蛮久.昨天突然弄通了.小记一下说不定能帮到同需求人. [设备] 主 ...
- [LeetCode] K Inverse Pairs Array K个翻转对数组
Given two integers n and k, find how many different arrays consist of numbers from 1 to n such that ...