$("#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上传图片到服务器的更多相关文章

  1. 使用Ajax上传图片到服务器(不刷新页面)

    有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这 ...

  2. ajax上传图片到服务器

    通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使 ...

  3. ajax上传图片到服务器简单操作

    前端: 通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传 ...

  4. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  5. ajax上传图片

    选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...

  6. vuejs使用FormData对象,ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...

  7. 使用ajax上传图片,并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  8. 34、JS/AJAX

      1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用   声明:服务端使用Servlet技术 一 ...

  9. [Js]Ajax

    一.什么是Ajax 不刷新的情况下读取数据或提交数据 (最早出现ajax:谷歌地图,拖动一下出现一片新的视野) 应用:用户注册.在线聊天.微博 特性:只能从服务器上去读取数据(所以我们需要配置自己的服 ...

随机推荐

  1. ssh-keygen的用法

    一.概述 1.就是为了让两个linux机器之间使用ssh不需要用户名和密码.采用了数字签名RSA或者DSA来完成这个操作 2.模型分析 假设 A (192.168.20.59)为客户机器,B(192. ...

  2. Spring aop 实现异常拦截

    使用aop异常挂载功能可以统一处理方法抛出的异常,减少很多重复代码,实现如下: 1.实现ThrowAdvice public class ExceptionHandler implements Thr ...

  3. Web开发基础

    一.后台 1.MyEclipse:Java Web的编辑器 2.Java Servlet:后台代码 3.Velocity:前后台接口 4.mySql:数据库 二.前台 1.js:前台代码 2.jQue ...

  4. [再寄小读者之数学篇](2014-11-24 Abel 定理)

    设幂级数 $\dps{g(x)=\sum_{n=0}^\infty a_nx^n}$ 在 $|x|<1$ 内收敛, 且 $\dps{\sum_{n=0}^\infty a_n=s}$ 收敛. 则 ...

  5. MYSQL性能查看(命中率,慢查询)

    网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...

  6. Android 动画深入解析

    http://blog.csdn.net/rain_butterfly/article/details/39642613

  7. Selenium2Library系列 keywords 之 _SelectElementKeywords 之 select_from_list_by_label(self, locator, *labels)

    def select_from_list_by_label(self, locator, *labels): """Selects `*labels` from list ...

  8. python与saltstack动态传参变量名的研究

    python动态变量名 import sys createVar = locals() listTemp = range(1,10) for i in range(1, len(sys.argv)): ...

  9. unity3d Human skin real time rendering 真实模拟人皮实时渲染(转)

    先放出结果图片...由于网上下的模型是拼的,所以眼皮,脸颊,嘴唇看起来像 存在裂痕,解决方式是加入曲面细分和置换贴图 进行一定隆起,但是博主试了一下fragment shader的曲面细分,虽然细分成 ...

  10. 初识-----基于Socket的UDP和TCP编程及测试代码

    一.概述 TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. TCP:传输控制协议,一种面向连接的协议,给用户进程提供可靠的全双工的字节流 ...