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);//生成canvasvar 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)));

转载于:https://www.cnblogs.com/jh1994/p/5153656.html

js ajax上传图片到服务器相关推荐

js网页上传图片到服务器上,js实现上传图片到服务器
本文实例为大家分享了js实现上传图片到服务器的具体代码,供大家参考,具体内容如下 html //多张图片上传multiple //原生提交按钮 javascript // 定义一个接收转为base64 ...
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面: 另一种思路是,直接在本地 ...
js 压缩图片及ajax上传图片
js 压缩图片及ajax上传图片 js压缩图片 ajax 上传文件最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动.在测试的过程中我们发现上传的图片非常大.我们 ...
上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(1)
最近做了个用户维护功能,涉及到照片的操作. 照片是存到数据库oracle中的Blob字段中. 难点有两个: 1,图片的上传:2,Blob字段的读取. 先说图片的上传吧, 我使用common-fileu ...
vue用form上传图片_vuejs使用FormData，ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
ajax上传图片java6,java ajax上传图片返回json数
java ajax上传图片返回json数 [2021-02-10 00:12:56] 简介: 解决java的ajax提交返回值中文乱码的方法:1.在RequestMapping的并发配置中加代码[p ...
canvas使用Ajax上传图片PHP,使用ajax上传图片，并且使用canvas实现出上传进度效果...
前端代码: 使用ajax上传图片,并使用canvas实现出上传进度效果 #myImg { border: 1px solid gray; border-radius: 8px; position: a ...
不同服务器怎么响应ajax,如何从服务器获得响应而无需刷新和使用JQuery/AJAX？
是否有任何"正确"的方式来获得服务器的响应,而不使用JQuery/AJAX,当然没有刷新页面? server.js:如何从服务器获得响应而无需刷新和使用JQuery/AJAX? v ...
34、JS/AJAX
1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用声明:服务端使用Servlet技术一 ...

js ajax上传图片到服务器

js ajax上传图片到服务器相关推荐

最新文章

热门文章