MVC微信浏览器图片上传(img转Base64)
因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器
话不多说, 贴代码
- 先看前端显示出来的东西
- OK 图片不重要,看代码
<!--微信图片上传--><section class="logo-license"><div class="half"><div class="uploader"><a class="license">@if (!string.IsNullOrEmpty(Model.ClassImage)){<img id="img-1" src="@Model.ClassImage" />}else{<img id="img-1" src="/images/img_01.png" />}</a><input id="file0" class="file-3" name="imageData" type="file" width="130" height="130" accept="image/*" /></div><div class="yulan"><img src="" id="img0"><div class="enter"><button class="btn-2 fl">取消</button><input type="submit" class="btn-3 fr" value="确定" /></div></div></div><div class="clear"></div></section>
再看js代码
<script>var subUrl = "";$("#file0").change(function () {//获取当前var objUrl = getObjectURL(this.files[0]);console.log(this.files[0])obUrl = objUrl;console.log("objUrl = " + objUrl);if (objUrl) {$("#img0").attr("src", objUrl).show();}else {$("#img0").hide();}});$(function () {$(".file-3").bind('change', function () {subUrl = $(this).val();$(".yulan").show();$(".file-3").val("");});$(".btn-3").click(function () {$("#img-1").attr("src", obUrl);$(".yulan").hide();$(".file-3").parents(".uploader").find(".filename").val(subUrl);var basepath = "";var ClassID = $("#ClassID").val();var TeacherID = $("#TeacherID").val();var image = new Image();image.crossOrigin = '';image.src = obUrl;image.onload = function () {basepath = getBase64Image(image);basepath = basepath.replace(/^data:image\/(png|jpg);base64,/, "")//开始异步发送$.ajax("/home/savenewsbackimage", {data: JSON.stringify({ path: basepath, ClassID: ClassID, TeacherID: TeacherID }),type: "POST", dataType: "text", contentType: "application/json;utf-8",success: function (data) {alert(data);}});}})$(".btn-2").click(function () {$(".yulan").hide();})});function qd() {var objUrl = getObjectURL(this.files[0]);obUrl = objUrl;console.log("objUrl = " + objUrl);if (objUrl) {$("#img0").attr("src", objUrl).show();}else {$("#img0").hide();}}function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}//img转码base64function getBase64Image(img) {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/" + ext);return dataURL;}</script>
再看服务器端代码
[HttpPost]public ActionResult SaveNewsBackImage(string path, string ClassID, string TeacherID){//保存图片到服务器,string basePath = "/UploadPic/";string imgname = DateTime.Now.Ticks + ".jpg";string basepath = HttpContext.Server.MapPath(basePath);string Pic_Path = basepath + imgname;using (FileStream fs = new FileStream(Pic_Path, FileMode.Create)){using (BinaryWriter bw = new BinaryWriter(fs)){byte[] data = Convert.FromBase64String(path);bw.Write(data);bw.Close();}}//把图片地址存到数据库string serpath = ConfigurationManager.AppSettings["Domain"].ToString();string classimagePath = serpath + basePath + imgname;var flag = new ClassBLL().SaveNewsBackImage(classimagePath, Convert.ToInt32(ClassID), Convert.ToInt32(TeacherID));return Content("上传成功");}
至此, 大家应该能看明白这个微信内置浏览器的上传方法了~ 希望和我一样的朋友, 继续加油,奋斗~ 在路上
转载于:https://www.cnblogs.com/29boke/p/5462885.html
MVC微信浏览器图片上传(img转Base64)相关推荐
- php处理微信weui图片上传
php处理微信weui图片上传 微信weui上传组件 Jquery代码 php处理数据(Thinkphp5) 前端通过weui完成上传图片.预览图片的操作(具体可以看weui案例),然后weui请求数 ...
- .net mvc + layui做图片上传(二)—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
- 【坑爹微信】微信JSSDK图片上传问题和解决
目录 List 1. 那一抹淡淡的忧伤-–微信开发基础 2. 用纯js是不可能用纯js了,这辈子都不用纯js了 -– 微信JSSDK开发以及问题解答 3. 要你命3000 -- 微信支付开发系列问题解 ...
- 微信 开发 图片 上传 阿里云 oss 服务器
在做微信开发时,我需要将图片上传至阿里云OSS,思路是服务端下载微信图片再转存至OSS. wx.chooseImage({count: 1, // 默认9sizeType: ['original', ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){va ...
- 微信js-sdk图片上传下载——java完整流程
最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结. 在这里能知道使用js api的基本配置https://mp.weixin.qq.com/wiki?t=resource/re ...
- ASP.NET MVC +Layui 实现图片上传功能
ASP.NET MVC +Layui 实现图片上传功能 这是一个前端的添加功能 只展示图片添加的前端代码 <div class="layui-upload"> < ...
- 微信jssdk图片上传给服务器,使用微信JSSDK进行图片选择和上传
2015-04-28 2018-08-21 06:20:42 最近我在用 PHP 做某微信公众号的开发,其中用到了微信jssdk进行图片的选择和上传.在参考了微信官方提供的jssdk文档之后,大致有了 ...
- 微信支付图片上传java_微信开发-----微信公众号调用微信上传图片接口
$(function () { var url = location.href.split('#')[0]; var date = "url=" + url; //get中url指 ...
最新文章
- 用友登录控件Vbs脚本
- 搭建本地文件服务器实验报告,下搭建服务器实验报告.pdf
- 这些“震惊世界的新发现”,原来都是科学界的大骗局
- java 语法检查_java编译期间的语法检查
- 关于2d物理引擎box2d与ape的评论
- 怎么单选_听力三个选项都出的单选怎么破?| 附今日听力S1S2及听力原文
- Javascript Eclipse 自动代码规范化
- 小程序发布上线流程_微信小程序开发到上线流程详解
- 经纬财富:宜昌炒白银和炒黄金有什么不同?
- 3dB短缝波导耦合器设计
- 共阳极数码管与共阴极数码管联合使用来循环显示数字00-99。
- 平面模拟变形--ps
- 网易考拉海购Dubbok框架优化详解(学习笔记)
- 基于深度神经网络的火灾探测声学灭火器控制
- Java几种定时发送消息
- Error: IMA Service Error Message -2147483647 群里解决问题收集的 (一飞出品)
- 读书笔记16 《傅雷家书》 傅雷傅敏
- 英语学习单词篇(16)
- 家装灯线走线图_求一套完整家庭装修电路图和走线图用来学习
- 甘超波:NLP亲子教育的本质