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移动端地址三级联动组件(一)
vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...
- Flask - 路由系统
目录 Flask - 路由系统 @app.route()装饰器中的常用参数 methods : 当前 url 地址,允许访问的请求方式 endpoint:反向url地址,默认为视图函数名(url_fo ...
- 学习C语言偶遇【斐波那契数列】
1.今天学着学着就发现一个特别有趣的数列,斐波那契数列,感觉很好玩,翠花,上代码~~~~~~~ #include <stdio.h> int fibonaci(int i) { ) { ; ...
- SVG格式图片转成HTML中SVG的Path路径
AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...
- mac上常用的命令
平时会经常遇到的问题做一个总结
- 【Codeforces 225C】Barcode
[链接] 我是链接,点我呀:) [题意] 让你把每一列都染成一样的颜色 要求连续相同颜色的列的长度都大于等于x小于等于y 问你最少的染色次数 [题解] 先求出每一列染成#或者.需要染色多少次 设f[0 ...
- C. Vladik and Memorable Trip DP
C. Vladik and Memorable Trip time limit per test 2 seconds memory limit per test 256 megabytes input ...
- Performance Metrics(性能指标1)
Performance Metrics(性能指标) 在我们开始旅行本书之前,我必须先了解本书的性能指标和希望优化后的结果,在第二章中,我们探索更多的性能检测工具和性能指标,可是,您得会使用这些工具和明 ...
- 一次源码编译PHP折腾记
前言LINUX环境下编译安装是很折腾人的一件事情,如果没有C/C++功底,碰到编译器报错,肯定要抓狂了 :):),有些软件需要依赖其它库,必须先把依赖库安装好才能进行软件安装.当你学会了编译安装神技之 ...
- android程序在调试时出现了套接字异常“java.net.SocketException: Permission denied”该如何解决
Socket不能对外连接,错误不会被报出,调试的时候,能看到Exception, 一般是抛出 java.net.socketexception permission denied这个异常.只要你的程序 ...