使用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图片压缩后上传给服务器的更多相关文章

  1. 小程序踩坑记录-上传图片及canvas裁剪图片后上传至服务器

    最近在写微信小程序的上传图片功能,趟过了一些坑记录一下. 想要满足的需求是,从手机端上传图片至服务器,为了避免图片过大影响传输效率,需要把图片裁剪至适当大小后再传输 主要思路是,通过wx.choose ...

  2. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

  3. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  4. 前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器

    之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端. 我的思路是:一.引用第三方js在前端把table转成图片 二.通过ajax把图片上传到服务器,保存在指定文件夹 ...

  5. HTML5 本地裁剪图片并上传至服务器(转)

    很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...

  6. HTML5裁剪图片并上传至服务器实现原理讲解

    HTML5裁剪图片并上传至服务器实现原理讲解   经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...

  7. js插件---IUpload文件上传插件(包括图片)

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  8. layui框架图片上传至服务器

    注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...

  9. 项目分享五:H5图片压缩与上传

    一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...

随机推荐

  1. Mac里安装配置Jdk

    #下载jdk7的mac版 #官网下载地址http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.h ...

  2. servlet2.3/2.5/3.0/3.1的xml名称空间备忘

    The web.xml is a configuration file to describe how a web application should be deployed. Here’re 5  ...

  3. python 迭代器 生成器

    迭代器 生成器 一 什么是迭代器协议 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代 (只能往后走不能往前 ...

  4. Django ORM创建数据库

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  5. fedora27安装DB2 Express-C 11

    首先在官网下载对应的安装包和语言包两个文件. 然后通过tar -zxvf命令将下载的两个文件解压. 其中一个文件解压后是名为expc的文件,进入这个文件.里面有一个名为db2setup的文件. 在命令 ...

  6. Git + Maven + Jenkins 实现分布式部署

    一.安装 和 准备工作 我们选择了用 Tomcat 服务器下 war 包的安装方式.Jenkins 的下载地址:http://mirrors.jenkins-ci.org/,打开链接后,表格有war列 ...

  7. C# GetValue 正则获取开始结束代码

    /// <summary> /// 获得字符串中开始和结束字符串中间得值 /// </summary> /// <param name="str"&g ...

  8. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  9. JavaScript数据结构与算法(七) 双向链表的实现

    TypeScript方式实现源码 // 双向链表和普通链表的区别在于, 在链表中, // 一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个链向下一个元素, // 另一个链向前一个元 ...

  10. 简明shell入门