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) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
} //img转码base64
function 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("上传成功");
}
至此, 大家应该能看明白这个微信内置浏览器的上传方法了~ 希望和我一样的朋友, 继续加油,奋斗~ 在路上
MVC微信浏览器图片上传(img转Base64)的更多相关文章
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- .NET MVC实现多图片上传并附带参数(ajaxfileupload)
做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...
- .net mvc + layui做图片上传(二)—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- .net mvc + layui做图片上传(一)
图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...
- 微信jssdk图片上传
一.html页面如下: <div class="weui-cell"> <div class="weui-cell__hd"></ ...
- .Net Core 图片上传FormData和Base64
缓冲和流式传输是上传文件的两种常用方案,这里主要演示流式传输. 1.Net Core MVC Form提交方式: 前端页面 form表单提交: <form id="uploadForm ...
- 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能
html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...
- Spring MVC MultipartFile实现图片上传
<!--Spring MVC xml 中配置 --><!-- defaultEncoding 默认编码;maxUploadSize 限制大小--><!-- 配置Multi ...
随机推荐
- vue自定义轻量级form表单校验
遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...
- 洛谷——P3205 [HNOI2010]合唱队
P3205 [HNOI2010]合唱队 题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为 ...
- Vim 写 C/C++ 的配置
.vimrc 2018/08/08 更新 基本的配置,缩进显示行号等 给每个 C/C++ 文件添加头部,显示作者,文件创建时间 F5 编译执行 C/C++源代码 Ctrl + F 利用用 astyle ...
- vue 微信授权解决方案
背景 前后端分离项目 - SpringSocial 绑定与解绑社交账号如微信.QQ2018-08-14更新时隔四个月第一次更新,因为项目重构有一次接触到了微信授权,思路已经比原来清晰的多了,将重新修改 ...
- 【6】Django视图函数
治大国若烹小鲜.以道莅天下 --老子<道德经> 本节内容 Django web项目的运行流程分析 视图处理函数的定义 多视图处理函数及接收参数 1. web项目运行流程分析 通常情况下,完 ...
- windows 实现vue命令行
在代码编辑器里写好文件的位置,以及相关的命令,保存文件类型是.cmd
- 【codeforces 797C】Minimal string
[题目链接]:http://codeforces.com/contest/797/problem/C [题意] 一开始,给你一个字符串s:两个空字符串t和u; 你有两种合法操作; 1.将s的开头字符加 ...
- 【ACM】 hdu_1090_A+BII_201307261100
A+B for Input-Output Practice (II)Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/3276 ...
- ZooKeeper可视化Web管理工具收集(待实践)
原来ZooKeeper是有Web管理后台的.但是仅限于操作ZooKeeper的数据,如果要监控性能,估计要借助Nagios去配合. 这些工具应该ZK UI最好用,下面是收集的一些工具安装教程: htt ...
- Unity图片变灰的方式
http://www.tuicool.com/articles/Vruuqme NGUI中的Button差点儿是最经常使用到的控件之中的一个,而且能够组合各种组件(比方UIButtonColor,UI ...