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

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

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

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

HTML展示如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="LLYY.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="usercenter/js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="usercenter/js/jquery-1.11.1.min.js"></script>

    <script src="usercenter/js/jquery.html5upload.js" type="text/javascript"></script>

    <script src="usercenter/js/jquery.MultiFile.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <input id="mainPicNum" name="mainPicNum" type="file"  class="" accept="gif|jpg|jpeg|png|bmp|pic" maxlength="1" onchange="change()"  />

        </div>

        <div id="result" style="padding-top:5px;">

        </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $(function () {

        var result = document.getElementById("result");

        var input = document.getElementById("mainPicNum");

        if (typeof FileReader === 'undefined') {

            result.innerHTML = "抱歉，你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器！";

            input.setAttribute('disabled', 'disabled');

        }

        $("#mainPicNum").MultiFile({

            afterFileSelect: function (element, value, master_element) {

                readFile.call(element);

            },

            afterFileRemove: function (element, value, master_element) {

                $('img').each(function () {

                    if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) {

                        $(this).remove();

                    }

                });

            }

        });

        function readFile() {

            var file = this.files[0];

            if (!/image\/\w+/.test(file.type)) {

                alert("文件必须为图片！");

                return false;

            }

            var reader = new FileReader();

            reader.readAsDataURL(file);

            reader.onload = function (e) {

                result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>';

            }

        }

    });

    $('#mainPicNum').Html5Upload({

        url: 'UploadImage.ashx?action=action',

         perLoading: function (data, curindex) {

             // console.log(data)

             //$(".MultiFile-remove").css("display", "none");

             //$(".MultiFile-title").css("display", "none");

         },

         perLoaded: function (curindex, data) {

             //alert(data);

             //alert("上传头像成功");

             //var img = '<img src="/Images/foo.png" style="background-image: url(\'' + data + '\');" />';

             // $('#hiddenImg').val(data);

             //  $(".js_pic").html(img);

         }

    });

    </script>

一般处理程序如下：

using System;

using System.Collections.Generic;

using System.Drawing;

using System.IO;

using System.Linq;

using System.Web;

namespace LLYY

{

    /// <summary>

    /// UploadImage 的摘要说明

    /// </summary>

    public class UploadImage : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            if (HttpContext.Current.Request.QueryString["action"] == "action")

            {

                uppic();

            }

            context.Response.ContentType = "text/plain";

        }

        protected void uppic()

        {

            string fileTim = DateTime.Now.ToString("yyyMddHHmmssffff");

            string pic = HttpContext.Current.Request.Form["pic"];

            pic = HttpContext.Current.Server.UrlDecode(pic);

            if (pic != null)

            {

                pic = pic.Split(',')[];

                MemoryStream stream = new MemoryStream(Convert.FromBase64String(pic));

                Bitmap image = new Bitmap(stream);

                string fileurl = "/usercenter/uppic/";

                string serverPath = HttpContext.Current.Server.MapPath(fileurl);

                if (Directory.Exists(serverPath) == false)//如果不存在就创建file文件夹

                {

                    Directory.CreateDirectory(serverPath);

                }

                string picNum=Guid.NewGuid().ToString("N");

                string url = fileurl +picNum + ".png";

                image.Save(HttpContext.Current.Server.MapPath(url));

                HttpContext.Current.Response.Write(url);

            }

            HttpContext.Current.Response.End();

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

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

   protected void uppic()

        {

            string fileTim = DateTime.Now.ToString("yyyMddHHmmssffff");

            string pic = HttpContext.Current.Request.Form["images"];

            pic = HttpContext.Current.Server.UrlDecode(pic);

            if (pic != null)

            {

                var imgData = pic.Split(',')[];

                string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");

                if (dummyData.Length %  > )

                {

                    dummyData = dummyData.PadRight(dummyData.Length +  - dummyData.Length % , '=');

                }

                byte[] byteArray = Convert.FromBase64String(dummyData);

                MemoryStream stream = new MemoryStream(byteArray);

                Bitmap image = new Bitmap(stream);

                string fileurl = "/usercenter/uppic/";

                string serverPath = HttpContext.Current.Server.MapPath(fileurl);

                if (Directory.Exists(serverPath) == false)//如果不存在就创建file文件夹

                {

                    Directory.CreateDirectory(serverPath);

                }

                string picNum = Guid.NewGuid().ToString("N");

                string url = fileurl + picNum + ".png";

                image.Save(HttpContext.Current.Server.MapPath(url));

                HttpContext.Current.Response.Write(url);

            }

            HttpContext.Current.Response.End();

        }

关于产生上述异常的原因，大家可参考：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. loadrunner 场景设计-负载生成器管理

    场景设计-负载生成器管理 by:授客 QQ:1033553122 1  简介 当执行一个场景时,Controller把场景中的每个用户配到负载生成器(Load generator). 所谓的负载生成器 ...

  2. Android Studio 通过一个登录功能介绍SQLite数据库的使用

    前言: SQLite简介:是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在 ...

  3. Python基础知识：函数

    1.定义函数和调用函数 #定义函数def def greet_user(username): '''简单的问候语''' print('Hello,%s!'%username) greet_user(' ...

  4. Django框架的使用教程--路由-请求-响应[四]

    路由 路由可以定义在工程的目录下(看你的需求),也可以定义在各个应用中来保存应用的路由,用主路文件urls中使用include()包含各个应用的子路由的数据 路由的解析顺序 Django接收到请求后, ...

  5. if语句的嵌套以及条件运算符和条件表达式（初学者）

    1.当if语句中的执行语句又是if语句时,则构成了if语句的嵌套情形. 其一般形式可表示为: if() { if()……; } 或: if() if()语句1: else 语句2: else if() ...

  6. C#异步编程の-------异步编程模型（APM）

    术语解释: APM               异步编程模型, Asynchronous Programming Model EAP                基于事件的异步编程模式, Event ...

  7. Android的进阶学习（六）--理解View事件分发

    http://www.jianshu.com/p/34cb396104a7 有些无奈,期末考试抱佛脚,还好没有挂,现在继续进阶. 好久以前就看到了View的事件分发,但是当时功底不够,源码也不敢深究, ...

  8. Spring AOP失效之谜

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 什么是AOP1 AOP(Aspect Oriented Programming),即面向切面编 ...

  9. 2257: [Jsoi2009]瓶子和燃料

    题意:给你n个数字,然后让你选出k个,这k个数字进行任意组合,问得到的最小结果是多少? 数学知识: 分析:根据题意得出数学公式: 那么,如何在n个之中选出k个呢?其实不用选,因为直接计算各个因子,然后 ...

  10. 水题，P1789 【Mc生存】插火把 （暴力即可）

    #include<cstdio> #define maxn int(1e4) bool dp[maxn][maxn]; int n; void f1(int x, int y) { dp[ ...