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:谷歌地图,拖动一下出现一片新的视野) 应用:用户注册.在线聊天.微博 特性:只能从服务器上去读取数据(所以我们需要配置自己的服 ...
随机推荐
- 热门Web开发方式 REST实现原理浅析
REST 首先只是一种架构样式,不是一种标准.这点和 Ajax 类似,两者都是利用现有的成熟技术.在 REST 的定义中,一个 Web 应用总是使用固定的 URI 向外部世界呈现(或者说暴露)一个资源 ...
- PHPMailer邮件类使用错误分析
PHPMailer配置清单如下: require_once ‘class.phpmailer.php‘; $receiver = ”; $mail = new PHPMailer ( ); $mai ...
- invalid initialization of non-const reference of type与discards qualifiers
参数传递 函数参数的传递是初始化语义:用调用者的实参去初始化函数的形参,如果参数是对象,需要调用该类的拷贝构造函数,如果没有显式定义的拷贝构造函数,则执行默认的按成员拷贝 ...
- Spring3.0.6定时任务
项目使用的Spring版本比较旧是3.0.6版本,由于需要进行定时任务,就决定使用Spring自带的scheduled task. 在网上找了很多文章,也查看了Spring3.0.6的官方文档,按照网 ...
- 转载:50个C/C++源代码网站
来源:http://www.cnblogs.com/feisky/archive/2010/03/05/1679160.html C/C++是最主要的编程语言.这里列出了50名优秀网站和网页清单,这些 ...
- 插件五之滚动条jquery.slimscroll.js
前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...
- python发布模块的原理及部分讲解
- 原型模式--prototype
C++设计模式——原型模式 什么是原型模式? 在GOF的<设计模式:可复用面向对象软件的基础>中是这样说的:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.这这个定义中,最 ...
- 初识MFC学习——Hello World
MFC(Microsoft Foundation Classes),是一个微软公司提供的类库(class libraries),以C++类的形式封装了Windows的API,并且包含一个应用程序框架, ...
- Sublime Text 3快捷键
Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有打开文件 Ctrl+Shift+V ...