js ajax上传图片到服务器
$("#up_goods_pic").on('change',function(){
var file = this.files[0];
var url = webkitURL.createObjectURL(file);
/* 生成图片
* ---------------------- */
var $img = new Image();
$img.onload = function() {
//生成比例
var width = $img.width,
height = $img.height,
scale = width / height;
width = parseInt(800);
height = parseInt(width / scale);
//生成canvas
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage($img, 0, 0, width, height);
var base64 = canvas.toDataURL('image/jpeg');
//发送到服务端
$.ajax({
data:{
data:base64
},
url:"/shop/upload_goods_pic",
type:"POST",
dataType:"json",
succeed:function(data){
if(data.error === 0){
$("#goods_pic").append("<img src='"+data.file+"'/>");
}else{
alert(data.msg);
}
}
});
}
$img.src = url;
});
服务端
$base64_image_content = $this->input->post("data");
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2];
$new_file = "./".time().rand().".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
$this->goods_pic_model->add($new_file);
die(json_encode(array("file"=>$new_file,"error"=>0)));
}
}
die(json_encode(array("error"=>1)));
js ajax上传图片到服务器的更多相关文章
- 使用Ajax上传图片到服务器(不刷新页面)
有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这 ...
- ajax上传图片到服务器
通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使 ...
- ajax上传图片到服务器简单操作
前端: 通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传 ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- ajax上传图片
选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...
- vuejs使用FormData对象,ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
- 使用ajax上传图片,并且使用canvas实现出上传进度效果
前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...
- 34、JS/AJAX
1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用 声明:服务端使用Servlet技术 一 ...
- [Js]Ajax
一.什么是Ajax 不刷新的情况下读取数据或提交数据 (最早出现ajax:谷歌地图,拖动一下出现一片新的视野) 应用:用户注册.在线聊天.微博 特性:只能从服务器上去读取数据(所以我们需要配置自己的服 ...
随机推荐
- liunx之tar 命令
tar命令 可以用来压缩打包单文件.多个文件.单个目录.多个目录. Linux打包命令_tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar ...
- Java类的执行顺序
在Java中一个类包括:构造块.构造方法.静态块.main方法.普通方法. 通过下面的例子将看出一个类中各种方法的执行顺序: /** * @author zhengbinMac */ public c ...
- eclipse环境下tomcat远程调试方法
前提:Windows环境tomcat是以catalina.bat方式而非Windows服务形式启动(两者所使用的JAVA配置及JVM参数会有差异). 服务器段设置 方法1:修改CATALINA_OPT ...
- [Android] 关于系统工具栏和全屏沉浸模式
随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想实现的好,就要去 ...
- Android配置时,点击eclipse里Window->Preferences里的android选项出错
An error has occurred when creating this preference page. 解决方法:重起eclipse
- 什么是SPF?如何设置企业邮箱的SPF呢?(TXT记录)
什么是SPF? (Sender Policy Framework) 的缩写,一种以IP地址认证电子邮件发件人身份的技术,是非常高效的垃圾邮件解决方案. 接收邮件方会首先检查域名的SPF记录,来确定 ...
- OE7设置菜单为什么这么少?
默认安装的OE7设置菜单只有很少的功能: 如果需要更多的OE定制,必须开启“技术特性”选项:
- Linux基本命令(7)文件阅读的命令
文件阅读的命令 命令 功能 head 查看文件的开头部分 tail 查看文件结尾的10行 less less是一个分页工具,它允许一页一页地(或一个屏幕一个屏幕地)查看信息 more more是一个分 ...
- 让pre标签自动换行示例代码
pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码.对于技术博客经 ...
- Python在centos下的安装
1.wget http://www.python.org/ftp/python/2.7.9/Python-2.7.9.tgz默认下载到主目录下 2.tar xzf Python-2.6.6.tgz 3 ...