因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 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)相关推荐

  1. php处理微信weui图片上传

    php处理微信weui图片上传 微信weui上传组件 Jquery代码 php处理数据(Thinkphp5) 前端通过weui完成上传图片.预览图片的操作(具体可以看weui案例),然后weui请求数 ...

  2. .net mvc + layui做图片上传(二)—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

  3. 【坑爹微信】微信JSSDK图片上传问题和解决

    目录 List 1. 那一抹淡淡的忧伤-–微信开发基础 2. 用纯js是不可能用纯js了,这辈子都不用纯js了 -– 微信JSSDK开发以及问题解答 3. 要你命3000 -- 微信支付开发系列问题解 ...

  4. 微信 开发 图片 上传 阿里云 oss 服务器

    在做微信开发时,我需要将图片上传至阿里云OSS,思路是服务端下载微信图片再转存至OSS. wx.chooseImage({count: 1, // 默认9sizeType: ['original', ...

  5. 微信JS图片上传与下载功能--微信JS系列文章(三)

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){va ...

  6. 微信js-sdk图片上传下载——java完整流程

    最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结. 在这里能知道使用js api的基本配置https://mp.weixin.qq.com/wiki?t=resource/re ...

  7. ASP.NET MVC +Layui 实现图片上传功能

    ASP.NET MVC +Layui 实现图片上传功能 这是一个前端的添加功能 只展示图片添加的前端代码 <div class="layui-upload"> < ...

  8. 微信jssdk图片上传给服务器,使用微信JSSDK进行图片选择和上传

    2015-04-28 2018-08-21 06:20:42 最近我在用 PHP 做某微信公众号的开发,其中用到了微信jssdk进行图片的选择和上传.在参考了微信官方提供的jssdk文档之后,大致有了 ...

  9. 微信支付图片上传java_微信开发-----微信公众号调用微信上传图片接口

    $(function () { var url = location.href.split('#')[0]; var date = "url=" + url; //get中url指 ...

最新文章

  1. 用友登录控件Vbs脚本
  2. 搭建本地文件服务器实验报告,下搭建服务器实验报告.pdf
  3. 这些“震惊世界的新发现”,原来都是科学界的大骗局
  4. java 语法检查_java编译期间的语法检查
  5. 关于2d物理引擎box2d与ape的评论
  6. 怎么单选_听力三个选项都出的单选怎么破?| 附今日听力S1S2及听力原文
  7. Javascript Eclipse 自动代码规范化
  8. 小程序发布上线流程_微信小程序开发到上线流程详解
  9. 经纬财富:宜昌炒白银和炒黄金有什么不同?
  10. 3dB短缝波导耦合器设计
  11. 共阳极数码管与共阴极数码管联合使用来循环显示数字00-99。
  12. 平面模拟变形--ps
  13. 网易考拉海购Dubbok框架优化详解(学习笔记)
  14. 基于深度神经网络的火灾探测声学灭火器控制
  15. Java几种定时发送消息
  16. Error: IMA Service Error Message -2147483647 群里解决问题收集的 (一飞出品)
  17. 读书笔记16 《傅雷家书》 傅雷傅敏
  18. 英语学习单词篇(16)
  19. 家装灯线走线图_求一套完整家庭装修电路图和走线图用来学习
  20. 甘超波:NLP亲子教育的本质

热门文章

  1. Android 数据库综述(二) 程序计算器与信号量来处理多线程并发问题
  2. express框架+fetch/axios.js(本机实现跨域请求)
  3. GIL、进/线程池、同/异步、阻/非阻塞
  4. mysql获取表的行号
  5. 利用BP神经网络预测水道浅滩演变
  6. Java观察者模式(Observer模式)
  7. C语言经典算法100例-002-数轴的使用
  8. 同一个世界不同的人(转)
  9. Linux C----创建静态库
  10. [HTTP] HTTP的缓存机制