1.前端html代码

<input style="width:100%" onchange="loadpicture(1)" type="file" name="file" id="file➩1">

<img id="pic➩1" style="width:100%;height:120px" src="/Resource/Document/NetworkDisk/ProjectActivity/590600b4-f330-43c2-96fb-ea221f9e0ce2.jpg">

<input hidden="true" id="picsrc➩1" class="txt">

<input hidden="true" id="PictureUrl➩1" class="txt">

2.js代码,使用FileReader读取文件

 function loadpicture(i) {
var obj = document.getElementById("file➩" + i);
var file = obj.files[0];
//alert(file);
//创建读取文件的对象
var reader = new FileReader(); //创建文件读取相关的变量
var imgFile; //为文件读取成功设置事件
reader.onload = function (e) {
//alert('文件读取完成');
imgFile = e.target.result;
//console.log(imgFile);
$("#pic➩" + i).attr('src', imgFile);
$("#picsrc➩" + i).val(imgFile);
}; //正式读取文件
reader.readAsDataURL(file); }

3.ajax传后台,此处有封装,用GetTableDataJson的方式获取了每一个file的ID

实际传输的话只需要传

 $("#picsrc➩" + i).val()的值
//保存事件
function AcceptClick() {
if (!CheckDataValid('#form1')) {
return false;
} var ActivityForm = GetTableDataJson("#ActivityForm");
var ProblemForm = GetTableDataJson("#ProblemForm");
Loading(true, "正在提交数据...");
window.setTimeout(function () {
var postData = GetWebControls("#form1"); postData["ActivityForm"] = ActivityForm;
postData["ProblemForm"] = ProblemForm;
postData["BuildFormJson"] = JSON.stringify(GetWebControls("#CustomAttribute"));
AjaxJson("/ProjectManageModule/project/SubmitActivityForm?KeyValue=" + GetQuery('KeyValue'), postData, function (data) {
tipDialog(data.Message, 3, data.Code);
top.frames[tabiframeId()].windowload();
closeDialog();
});
}, 200);
}

4.后台c#代码,有可能会报GDI一般性错误的报错,

我这里是一开始目录没有对,所以报错,

realPath可以用
this.Server.MapPath(VirtualPath)的方式获取
由于我这边的文件存储目录和应用目录不在同一个盘符,所以使用了直接路径的写法
#region 图片处理,采用base64的方式转码解码
string virtualPath = "";
//图片上传
if (!string.IsNullOrEmpty(entityD.picsrc))
{
//删除老的图片
string FilePath = this.Server.MapPath(entityD.PictureUrl);
if (System.IO.File.Exists(FilePath))
System.IO.File.Delete(FilePath); string fileGuid = CommonHelper.GetGuid;
//long filesize = Filedata.ContentLength;
string FileEextension = ".jpg";
string uploadDate = DateTime.Now.ToString("yyyyMMdd");
//string UserId = ManageProvider.Provider.Current().UserId;
virtualPath = string.Format("~/Resource/Document/NetworkDisk/{0}/{1}{2}", "ProjectActivity", fileGuid, FileEextension); string realPath = string.Format(@"D:\LeaRun\Resource\Document\NetworkDisk\{0}\{1}{2}", "ProjectActivity", fileGuid, FileEextension); //string fullFileName = this.Server.MapPath(virtualPath);
////创建文件夹,保存文件
//realPath = Path.GetDirectoryName(fullFileName);
//先处理图片文件
string temp = entityD.picsrc.Substring();
byte[] arr2 = Convert.FromBase64String(entityD.picsrc.Substring());
using (MemoryStream ms2 = new MemoryStream(arr2))
{
System.Drawing.Bitmap bmp2 = new System.Drawing.Bitmap(ms2);
bmp2.Save(realPath, System.Drawing.Imaging.ImageFormat.Jpeg);
bmp2.Dispose();
ms2.Close();
}
entityD.PictureUrl = virtualPath;
}
#endregion

使用base64转码的方式上传图片的更多相关文章

  1. 前端以BASE64码的形式上传图片

    前端以BASE64码的形式上传图片 一直有一个很苦恼的问题困扰着铁柱兄,每次上传图片的时候前端要写一大堆js,然后后台也要写一堆java代码做处理.于是就在想,有没有简单又方便的方法把图片上传.今天算 ...

  2. 直接用<img> 的src属性显示base64转码后的字符串成图片

    直接用<img> 的src属性显示base64转码后的字符串成图片 <img src="base64转码后的字符串" ></img> 下面的图片 ...

  3. javascript 使用btoa和atob来进行Base64转码和解码

    javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用.当前html5标准正式化之际,Base64将有较大的转型空间,对于H ...

  4. Base64的编码转换方式

    下面,详细介绍Base64的编码转换方式. 所谓Base64,就是说选出64个字符----小写字母a-z.大写字母A-Z.数字0-9.符号"+"."/"(再加上 ...

  5. Eclipse Class Decompiler影响class默认打开方式,重新设置Eclipse默认源码打开方式

    安装Eclipse Class Decompiler插件后,Eclipse中的默认源码打开方式被修改为Eclipse Class Decompiler 这不是我喜欢的,因为我希望,源码从网络中获取,当 ...

  6. 控件真的很好用,突然感觉自己以前研究Discuz!NT366源码的方式很2了

    控件真的很好用,突然感觉自己以前研究Discuz!NT366源码的方式很2了,就是按钮上的或其他控件上的图片哪里去了?

  7. JS图片上传后base64转码

    代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...

  8. Python Base64转码解码

    Python Base64 提供了好几种方法例如: encode, decode, encodestring, decodestring, b64encode, b64decode, standard ...

  9. javascript Base64转码解码

    javascript 使用btoa和atob来进行Base64转码和解码 $scope.checkAddCookie = function() { var expireDate = new Date( ...

随机推荐

  1. 【英宝通Unity4.0公开课学习 】(六)76讲到90讲

    还是关于Mecanim动画的内容. 这些讲的每讲长度明显比前面的长,而且很多都涉及到脚本编写. 不过我还是2倍速给略览过去了,主要目的就是学个框架嘛 :) 1. Blend Tree 可嵌套. 可理解 ...

  2. TZOJ 1545 Hurdles of 110m(01背包dp)

    描述 In the year 2008, the 29th Olympic Games will be held in Beijing. This will signify the prosperit ...

  3. tmpFile.renameTo(classFile) failed解决

    完整异常: 严重: Servlet.service() for servlet [bjbr] in context with path [/HerPeisWechat] threw exception ...

  4. 关于UI设计行业的认识再到认识

    相信很多同学和我一样提及到UI行业时,尤其是连门槛都没有踏入半步时,总会一脸茫然. 我也是一样的,我刚接触UI的前半个月,文章读过好多,作品也看过好多,什么"小白入门UI的十大建议啊&quo ...

  5. jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  6. 2018.10.20 NOIP模拟 面包(数学期望)

    传送门 把方差的式子拆开. 方差=平方的期望-期望的平方. 显然只用维护点对的个数和总方案数就行了. 利用分步的思想来统计. 要统计覆盖一个矩形(x1,y1,x2,y2)(x1,y1,x2,y2)(x ...

  7. 2018.09.26洛谷P3957 跳房子(二分+单调队列优化dp)

    传送门 表示去年考普及组的时候失了智,现在看来并不是很难啊. 直接二分答案然后单调队列优化dp检验就行了. 注意入队和出队的条件. 代码: #include<bits/stdc++.h> ...

  8. 2018.09.23 关键网线(tarjan)

    描述 给出一个无向连通图,即在任一个点对间存在路径.有的点提供服务a, 有的点提供服务b .同一个点可能有两种服务类型.每个点必须与提供2种服务的点连通.如果一个边断掉,就可能出现有些点不能被服务到, ...

  9. 2018.07.08 POJ 2481 Cows(线段树)

    Cows Time Limit: 3000MS Memory Limit: 65536K Description Farmer John's cows have discovered that the ...

  10. 03-vue-router

    前端路由的实现原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...