好久没写博客了，都感觉自己快堕落了！今天随性写一篇关于异步上传图片的程序及插件！

说是程序及插件，其实程序占大头，所谓的插件只是两个JS。分别为：jquery.html5upload.js 和 jquery.MultiFile.js

下载地址为：http://files.cnblogs.com/files/chenwolong/upload.rar

其实也没什么好说的，直接上源代码吧！

HTML展示如下：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="LLYY.WebForm1" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <title></title>
  9.     <script src="usercenter/js/jquery-1.11.1.min.js"></script>
  10.     <script type="text/javascript" src="usercenter/js/jquery-1.11.1.min.js"></script>
  11.     <script src="usercenter/js/jquery.html5upload.js" type="text/javascript"></script>
  12.     <script src="usercenter/js/jquery.MultiFile.js" type="text/javascript"></script>
  13.  
  14. </head>
  15. <body>
  16.     <form id="form1" runat="server">
  17.         <div>
  18.             <input id="mainPicNum" name="mainPicNum" type="file"  class="" accept="gif|jpg|jpeg|png|bmp|pic" maxlength="1" onchange="change()"  />
  19.         </div>
  20.         <div id="result" style="padding-top:5px;">
  21.  
  22.         </div>
  23.     </form>
  24. </body>
  25. </html>
  26. <script type="text/javascript">
  27.     $(function () {
  28.         var result = document.getElementById("result");
  29.         var input = document.getElementById("mainPicNum");
  30.  
  31.         if (typeof FileReader === 'undefined') {
  32.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器！";
  33.             input.setAttribute('disabled', 'disabled');
  34.         }
  35.  
  36.         $("#mainPicNum").MultiFile({
  37.             afterFileSelect: function (element, value, master_element) {
  38.                 readFile.call(element);
  39.             },
  40.             afterFileRemove: function (element, value, master_element) {
  41.                 $('img').each(function () {
  42.                     if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) {
  43.                         $(this).remove();
  44.                     }
  45.                 });
  46.             }
  47.         });
  48.  
  49.         function readFile() {
  50.             var file = this.files[0];
  51.             if (!/image\/\w+/.test(file.type)) {
  52.                 alert("文件必须为图片！");
  53.                 return false;
  54.             }
  55.             var reader = new FileReader();
  56.             reader.readAsDataURL(file);
  57.             reader.onload = function (e) {
  58.                 result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>';
  59.             }
  60.         }
  61.     });
  62.  
  63.     $('#mainPicNum').Html5Upload({
  64.         url: 'UploadImage.ashx?action=action',
  65.          perLoading: function (data, curindex) {
  66.              // console.log(data)
  67.              //$(".MultiFile-remove").css("display", "none");
  68.              //$(".MultiFile-title").css("display", "none");
  69.          },
  70.          perLoaded: function (curindex, data) {
  71.              //alert(data);
  72.              //alert("上传头像成功");
  73.              //var img = '<img src="/Images/foo.png" style="background-image: url(\'' + data + '\');" />';
  74.              // $('#hiddenImg').val(data);
  75.              //  $(".js_pic").html(img);
  76.          }
  77.     });
  78.  
  79.     </script>

一般处理程序如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Drawing;
  4. using System.IO;
  5. using System.Linq;
  6. using System.Web;
  7.  
  8. namespace LLYY
  9. {
  10.     /// <summary>
  11.     /// UploadImage 的摘要说明
  12.     /// </summary>
  13.     public class UploadImage : IHttpHandler
  14.     {
  15.  
  16.         public void ProcessRequest(HttpContext context)
  17.         {
  18.             if (HttpContext.Current.Request.QueryString["action"] == "action")
  19.             {
  20.                 uppic();
  21.             }
  22.             context.Response.ContentType = "text/plain";
  23.         }
  24.  
  25.         protected void uppic()
  26.         {
  27.             string fileTim = DateTime.Now.ToString("yyyMddHHmmssffff");
  28.  
  29.             string pic = HttpContext.Current.Request.Form["pic"];
  30.             pic = HttpContext.Current.Server.UrlDecode(pic);
  31.             if (pic != null)
  32.             {
  33.                 pic = pic.Split(',')[];
  34.                 MemoryStream stream = new MemoryStream(Convert.FromBase64String(pic));
  35.                 Bitmap image = new Bitmap(stream);
  36.                 string fileurl = "/usercenter/uppic/";
  37.                 string serverPath = HttpContext.Current.Server.MapPath(fileurl);
  38.  
  39.                 if (Directory.Exists(serverPath) == false)//如果不存在就创建file文件夹
  40.                 {
  41.                     Directory.CreateDirectory(serverPath);
  42.                 }
  43.  
  44.                 string picNum=Guid.NewGuid().ToString("N");
  45.                 string url = fileurl +picNum + ".png";
  46.                 image.Save(HttpContext.Current.Server.MapPath(url));
  47.                 HttpContext.Current.Response.Write(url);
  48.             }
  49.  
  50.             HttpContext.Current.Response.End();
  51.         }
  52.  
  53.         public bool IsReusable
  54.         {
  55.             get
  56.             {
  57.                 return false;
  58.             }
  59.         }
  60.     }
  61. }

今天是2018-8-7，我用这段代码作上传，发现还是有点小问题的，主要表现在抛出异常：字符数组或字符串长度无效！解决办法如下：

  1.    protected void uppic()
  2.         {
  3.             string fileTim = DateTime.Now.ToString("yyyMddHHmmssffff");
  4.  
  5.             string pic = HttpContext.Current.Request.Form["images"];
  6.             pic = HttpContext.Current.Server.UrlDecode(pic);
  7.             if (pic != null)
  8.             {
  9.                 var imgData = pic.Split(',')[];
  10.  
  11.                 string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
  12.                 if (dummyData.Length %  > )
  13.                 {
  14.                     dummyData = dummyData.PadRight(dummyData.Length +  - dummyData.Length % , '=');
  15.                 }
  16.                 byte[] byteArray = Convert.FromBase64String(dummyData);
  17.  
  18.                 MemoryStream stream = new MemoryStream(byteArray);
  19.                 Bitmap image = new Bitmap(stream);
  20.                 string fileurl = "/usercenter/uppic/";
  21.                 string serverPath = HttpContext.Current.Server.MapPath(fileurl);
  22.  
  23.                 if (Directory.Exists(serverPath) == false)//如果不存在就创建file文件夹
  24.                 {
  25.                     Directory.CreateDirectory(serverPath);
  26.                 }
  27.  
  28.                 string picNum = Guid.NewGuid().ToString("N");
  29.                 string url = fileurl + picNum + ".png";
  30.                 image.Save(HttpContext.Current.Server.MapPath(url));
  31.                 HttpContext.Current.Response.Write(url);
  32.             }
  33.  
  34.             HttpContext.Current.Response.End();
  35.         }

关于产生上述异常的原因，大家可参考：https://www.cnblogs.com/haoliansheng/p/4231846.html

直接复制粘贴即可

但是，我有一个疑问，希望大家能帮我解决。

我的疑问如下：

当网页第一次加载完成后，我们选择图片，执行如下操作：

第一步图示如下：

这时，图片已经上传到了指定路径。

紧接着，我们进行第二步，

第二步，点击 x ，把选择的图片去掉，然后再重新选择，图示如下：

结果后端程序不再执行了，也就是说程序仅仅只会在第一次执行。更改后，不执行，这样的异步上传肯定是不能满足工作需求的，但是，我个人能力有限，实在解决不了，请问各位大神，谁有好办法解决这个问题！

在此先说声谢谢！

如果谁能解决，请大度点，把您的优质代码贴在评论区！万分感谢！

@陈卧龙的博客

C# 异步上传图片案例的更多相关文章

  1. Jquery实现异步上传图片

    利用jQuery的ajax函数就可以实现异步上传图片了.一开始我是想在处理程序中,直接用context.Request.Files来获取页面中的input file,但是不知道为什么一次获取不了.网上 ...

  2. 异步上传图片，光用jquery不行，得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  3. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  4. 利用KindEditor的uploadbutton实现异步上传图片

    利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最经常使用的方法就是图片在iframe中上传.这样仅仅须要刷新iframe.而不用刷新整个页面.     KindEdi ...

  5. php结合jquery异步上传图片（ajaxSubmit）

    php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  6. 使用Ajax异步上传图片的方法(html,javascript,php)

    前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...

  7. Ajax实现异步上传图片

    要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  8. MVC异步上传图片到本地/服务器

    这两天朋友问我,有没有异步上传图片到本地/服务器这种demo,他有用, 我就想,好吧, 那刚好周末了,整理一套出来. 主要用到的是jquery uploadify 这个juqery的插件 ,可以无刷新 ...

  9. ajax异步上传图片&SpringMVC后台代码

    function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post& ...

随机推荐

  1. Linux LB--负载均衡和高可靠

    1.负载均衡典型应用场景,外网.内网.私网公共服务. 典型场景: (1)用户通过公网访问数据中心的ftp.web.https服务器. (2) 在数据中心内部东西向访问其他服务时,例如,访问其他虚拟机. ...

  2. Jenkins报错'Gradle build daemon disappeared unexpectedly'的问题解决

    在将项目集成到 Jenkins 后,经常会出现不稳定的构建,Jenkins 控制台输出的错误信息为:Gradle build daemon disappeared unexpectedly (it m ...

  3. python网络编程:socket、服务端、客户端

    本文内容: socket介绍 TCP: 服务端 客户端 UDP: 服务端 客户端 首发时间:2018-02-08 01:14 修改: 2018-03-20 :重置了布局,增加了UDP 什么是socke ...

  4. SonarQube 配置 LDAP（AD域）

    安装插件 1.下载 LDAP Plugin 插件,地址:https://docs.sonarqube.org/display/SONARQUBE67/LDAP+Plugin2.将下载的插件,放到 SO ...

  5. eclipse中SVN报错解决

    在Eclipse市场上安装完SVN插件后连接SVN时出现以下错误: SVN: '0x00400006: Validate Repository Location' operation finished ...

  6. .NET MVC 后台接受base64的上传图片

    #region 配合前端的多张图片上传 #region 上传图片方法 /// <summary> /// 接口方法 /// </summary> /// <param n ...

  7. Centos7.2中安装pip

    CentOS安装python-pip 在使用Python时,需要导入一些第三方工具包,一般情况下,鼓励使用pip来安装管理这些第三方的包, 这里我们来看一下如何在CentOS 7.2上安装Python ...

  8. 紧急整理了 20 道 Spring Boot 面试题，我经常拿来面试别人！

    面试了一些人,简历上都说自己熟悉 Spring Boot, 或者说正在学习 Spring Boot,一问他们时,都只停留在简单的使用阶段,很多东西都不清楚,也让我对面试者大失所望. 下面,我给大家总结 ...

  9. CentOS 7下安装Python3.6.4

    CentOS 7下安装Python3.5 •安装python3.6可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-deve ...

  10. mysql之4；

    1表之间的关系: 2select查询语句: 1表之间的关系 (1)多对一:(一个表里的多条记录对应另一个表里的一个记录) 建立多对一的关系需要注意1 先建立被关联的表,被关联的字段必须保证是唯一的2 ...