1.前端html代码

  1. <input style="width:100%" onchange="loadpicture(1)" type="file" name="file" id="file➩1">
  2.  
  3. <img id="pic➩1" style="width:100%;height:120px" src="/Resource/Document/NetworkDisk/ProjectActivity/590600b4-f330-43c2-96fb-ea221f9e0ce2.jpg">
  4.  
  5. <input hidden="true" id="picsrc➩1" class="txt">
  6.  
  7. <input hidden="true" id="PictureUrl➩1" class="txt">

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

  1. function loadpicture(i) {
  2. var obj = document.getElementById("file➩" + i);
  3. var file = obj.files[0];
  4. //alert(file);
  5. //创建读取文件的对象
  6. var reader = new FileReader();
  7.  
  8. //创建文件读取相关的变量
  9. var imgFile;
  10.  
  11. //为文件读取成功设置事件
  12. reader.onload = function (e) {
  13. //alert('文件读取完成');
  14. imgFile = e.target.result;
  15. //console.log(imgFile);
  16. $("#pic➩" + i).attr('src', imgFile);
  17. $("#picsrc➩" + i).val(imgFile);
  18. };
  19.  
  20. //正式读取文件
  21. reader.readAsDataURL(file);
  22.  
  23. }

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

实际传输的话只需要传

  1. $("#picsrc➩" + i).val()的值
  1. //保存事件
  2. function AcceptClick() {
  3. if (!CheckDataValid('#form1')) {
  4. return false;
  5. }
  6.  
  7. var ActivityForm = GetTableDataJson("#ActivityForm");
  8. var ProblemForm = GetTableDataJson("#ProblemForm");
  9. Loading(true, "正在提交数据...");
  10. window.setTimeout(function () {
  11. var postData = GetWebControls("#form1");
  12.  
  13. postData["ActivityForm"] = ActivityForm;
  14. postData["ProblemForm"] = ProblemForm;
  15. postData["BuildFormJson"] = JSON.stringify(GetWebControls("#CustomAttribute"));
  16. AjaxJson("/ProjectManageModule/project/SubmitActivityForm?KeyValue=" + GetQuery('KeyValue'), postData, function (data) {
  17. tipDialog(data.Message, 3, data.Code);
  18. top.frames[tabiframeId()].windowload();
  19. closeDialog();
  20. });
  21. }, 200);
  22. }

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

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

  1. realPath可以用
  1. this.Server.MapPathVirtualPath)的方式获取
    由于我这边的文件存储目录和应用目录不在同一个盘符,所以使用了直接路径的写法
  1. #region 图片处理,采用base64的方式转码解码
  2. string virtualPath = "";
  3. //图片上传
  4. if (!string.IsNullOrEmpty(entityD.picsrc))
  5. {
  6. //删除老的图片
  7. string FilePath = this.Server.MapPath(entityD.PictureUrl);
  8. if (System.IO.File.Exists(FilePath))
  9. System.IO.File.Delete(FilePath);
  10.  
  11. string fileGuid = CommonHelper.GetGuid;
  12. //long filesize = Filedata.ContentLength;
  13. string FileEextension = ".jpg";
  14. string uploadDate = DateTime.Now.ToString("yyyyMMdd");
  15. //string UserId = ManageProvider.Provider.Current().UserId;
  16. virtualPath = string.Format("~/Resource/Document/NetworkDisk/{0}/{1}{2}", "ProjectActivity", fileGuid, FileEextension);
  17.  
  18. string realPath = string.Format(@"D:\LeaRun\Resource\Document\NetworkDisk\{0}\{1}{2}", "ProjectActivity", fileGuid, FileEextension);
  19.  
  20. //string fullFileName = this.Server.MapPath(virtualPath);
  21. ////创建文件夹,保存文件
  22. //realPath = Path.GetDirectoryName(fullFileName);
  23. //先处理图片文件
  24. string temp = entityD.picsrc.Substring();
  25. byte[] arr2 = Convert.FromBase64String(entityD.picsrc.Substring());
  26. using (MemoryStream ms2 = new MemoryStream(arr2))
  27. {
  28. System.Drawing.Bitmap bmp2 = new System.Drawing.Bitmap(ms2);
  29. bmp2.Save(realPath, System.Drawing.Imaging.ImageFormat.Jpeg);
  30. bmp2.Dispose();
  31. ms2.Close();
  32. }
  33. entityD.PictureUrl = virtualPath;
  34. }
  35. #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. 64位windows+32位JDK8+32位eclipse是可以的

  2. 真机IOS8.3以上的文件夹共享

    ios8.3以上的版本,苹果规定需要验证身份,将不在默认开启文件共享,但是在实际测试工作中,提取文件是经常需要做的操作,笔者在使用GT采集性能数据后,通过itoos或itunes都无法获得目标app的 ...

  3. day3:vcp考试

    Q41. An administrator creates a custom ESXi firewall rule using an XML file, however the rules do no ...

  4. [leetcode]283. Move Zeroes移零

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...

  5. 将php数据下载csv文件

    <?php $sales = array( array( 'Northeast', '2005-01-01', '2005-02-01', 12.54 ), array( 'Northwest' ...

  6. bzr: ERROR: These branches have diverged. Use the missing command to see how.

    这个错误是在提交之后执行bzr pull时出现的,先uncommit,再pull就可以了.

  7. illumina SBS测序详解

    illumina SBS测序详解 2018年01月02日 09:33:56 sixu_9days 阅读数:9789 标签: 生物信息学二代测序 更多 个人分类: 测序原理   最近回头重新看了illl ...

  8. [Git]Git的常用命令

    Update: git status git diff wq git commit -am "why update files" git push Add: git add . g ...

  9. cxf soap rest webservice spring

    1. 导入 jar 包 2. 编写接口 3. 编写实现 4. 配置spring 配置文件 5. 配置web.xml servlet 6. 访问 package com.diancai.test; im ...

  10. 多线程的使用:只能用cmd来玩不能用idle

    from multiprocessing import Process import os def pro_do(name, func): print () if __name__ == " ...