首页 > 代码库 > C# 异步上传图片案例
C# 异步上传图片案例
好久没写博客了,都感觉自己快堕落了!今天随性写一篇关于异步上传图片的程序及插件!
说是程序及插件,其实程序占大头,所谓的插件只是两个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="http://www.mamicode.com/‘ + file.name + ‘" src="http://www.mamicode.com/‘ + this.result + ‘" 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="http://www.mamicode.com/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(‘,‘)[1]; 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; } } } }
直接复制粘贴即可
但是,我有一个疑问,希望大家能帮我解决。
我的疑问如下:
当网页第一次加载完成后,我们选择图片,执行如下操作:
第一步图示如下:
这时,图片已经上传到了指定路径。
紧接着,我们进行第二步,
第二步,点击 x ,把选择的图片去掉,然后再重新选择,图示如下:
结果后端程序不再执行了,也就是说程序仅仅只会在第一次执行。更改后,不执行,这样的异步上传肯定是不能满足工作需求的,但是,我个人能力有限,实在解决不了,请问各位大神,谁有好办法解决这个问题!
在此先说声谢谢!
如果谁能解决,请大度点,把您的优质代码贴在评论区!万分感谢!
@陈卧龙的博客
C# 异步上传图片案例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。