sunny123456

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
C#+aspx+ajaxfileupload 实现文件上传

https://blog.csdn.net/kongwei521/article/details/52910970

Html 代码及调用方法：

  1. <!DOCTYPE html>
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.     <title></title>
  7. </head>
  8. <body>
  9.     <form id="form1" runat="server">
  10.           <div style="margin:0 auto;text-align:center;">
  11.   <p>
  12.       <asp:Image  ID="imgShow" runat="server" Width="120" Height="120" ImageUrl="~/assets/images/nophoto.gif"/>
  13.     
  14.        </p>
  15.         <p>    <input name="file" id="fUpLoad" type="file"/><input type="hidden" id="Hfurl" runat="server"/>
  16.       <input type="hidden" id="hfStatus" runat="server"/></p>
  17.        <p>
  18.          <input type="button" value="上传" id="iUpLoad"/>
  19.        </p> 
  20.             </div>
  21.     	<script src="assets/js/jquery-1.8.2.min.js"></script>
  22.     <script src="plugins/uploadify/ajaxfileupload.js"></script>
  23. 		<script type="text/javascript">
  24. 			$(function () {
  25. 				$("#iUpLoad").click(function () {
  26. 					ajaxFileUpload();
  27. 				})
  28. 			})
  29. 			function ajaxFileUpload() {
  30. 				$.ajaxFileUpload
  31. 				(
  32. 								{
  33. 								   url: 'UpLoadHeadImg.aspx?random=' + Math.random(), //用于文件上传的服务器端请求地址
  34.  
  35. 									//secureuri: false, //一般设置为false
  36. 									fileElementId: 'fUpLoad', //文件上传空间的id属性  <input type="file" id="file" name="file" />
  37. 									dataType: 'json', //返回值类型 一般设置为json
  38. 									success: function (data, status)  //服务器成功响应处理函数
  39. 									{
  40.                                         alert(data);
  41. 									    $("#imgShow").attr("src", data.imgurl);
  42. 										$("#Hfurl").val(data.imgurl); //alert($("#hfDel").val());
  43. 										if (typeof (data.error) != 'undefined') {
  44. 											if (data.error != '') {
  45. 												alert(data.error);
  46. 											} else {
  47. 												//alert(data.msg);
  48. 											}
  49. 										}
  50. 									},
  51. 									error: function (data, status, e)//服务器响应失败处理函数
  52. 									{
  53. 										alert(e);
  54. 									}
  55. 								}
  56. 				)
  57. 				return false;
  58. 			}
  59. 		</script>
  60.           <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
  61.     </form>
  62.     	</body>
  63. </html>

后台代码： 

  1. 	protected void Page_Load(object sender, EventArgs e)
  2. 		{
  3. 			log4net.ILog log = log4net.LogManager.GetLogger(this.GetType().Name);
  4. 			int count = Request.Files.Count;
  5. 			string res = string.Empty;
  6. 			string error = string.Empty;
  7. 			string imgurl = string.Empty; ;
  8. 			if (count > 0)
  9. 			{
  10. 				try
  11. 				{
  12. 					HttpPostedFile File1 = Request.Files[0];
  13. 					string suffix = Path.GetExtension(File1.FileName).ToLower();
  14. 					string path = Server.MapPath("UpLoadImg/HeadImage");  //用来生成文件夹
  15.  
  16. 					if (File1.ContentLength / 4096 > 4096)
  17. 					{
  18. 						error = "单张头像不能超过4096K(4M)，请重新选择头像上传。";
  19. 					}
  20. 					else
  21. 					{
  22.  
  23. 						if (!Directory.Exists(path))
  24. 							Directory.CreateDirectory(path);
  25. 						var savepath = "UpLoadImg/HeadImage/" + Guid.NewGuid() + suffix;
  26. 						if (suffix.Equals(".jpg") || suffix.Equals(".png") || suffix.Equals(".gif") || suffix.Equals(".jpeg"))
  27. 						{
  28. 							File1.SaveAs(Server.MapPath(savepath));
  29. 						}
  30.  
  31. 						imgShow.ImageUrl = savepath; imgurl = savepath;
  32. 						hfStatus.Value = "1"; Hfurl.Value = savepath;
  33. 						error = "上传成功";
  34. 						res = "{\"info\":\"" + error + "\",\"data\":\"1\",\"imgurl\":\"" + savepath + "\"}";
  35. 					}
  36. 					if (HttpContext.Current.Request.Cookies["UserLogin"] != null)
  37. 					{
  38. 						log.Info(new LogContent(SearchDataClass.GetIPAddress(), 
  39. HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"],
  40. 	"上传头像图片信息", "上传图片为" + File1.FileName + "的图片路径" + imgurl + "成功,信息为。" + res));
  41. 					}
  42. 					else
  43. 					{
  44. 						log.Info(new LogContent(SearchDataClass.GetIPAddress(), "system",
  45. 	"上传头像图片信息", "上传图片为" + File1.FileName + "的图片路径" + imgurl + "成功,信息为。" + res));
  46.  
  47. 					}
  48. 				}
  49. 				catch (Exception ex)
  50. 				{
  51. 					hfStatus.Value = "0";
  52. 					res = "{\"info\":\"" + ex.Message + "\",\"data\":\"0\",\"imgurl\":\"\"}";
  53. 					if (HttpContext.Current.Request.Cookies["UserLogin"] != null)
  54. 					{
  55. 						log.Fatal(new LogContent(SearchDataClass.GetIPAddress(),
  56.  HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"], "上传头像图片信息", res));
  57. 					}
  58. 					else
  59. 					{
  60. 						log.Fatal(new LogContent(SearchDataClass.GetIPAddress(), "system",
  61. 												 "上传头像图片信息", res));
  62. 					}
  63.  
  64. 				}
  65. 				Response.Write(res);
  66. 				Response.End();
  67. 			}
  68. 			else
  69. 			{
  70. 				if (HttpContext.Current.Request.Cookies["UserLogin"] != null)
  71. 				{
  72. 					log.Warn(new LogContent(SearchDataClass.GetIPAddress(), 
  73. HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"], "上传头像图片信息", "无上传头像图片信息。"));
  74. 				}
  75. 				else
  76. 				{
  77. 					log.Warn(new LogContent(SearchDataClass.GetIPAddress(), "system", "上传头像图片信息", "无上传头像图片信息。"));
  78.  
  79. 				}
  80. 			}
  81.  
  82. 		}

由于上传会出现错误，因此修改ajaxfileupload.js 


  1. jQuery.extend({
  2. 	createUploadIframe: function (id, uri) {
  3. 		//create frame
  4. 		var frameId = 'jUploadFrame' + id;
  5. 		var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
  6. 		if (window.ActiveXObject) {
  7. 			if (typeof uri == 'boolean') {
  8. 				iframeHtml += ' src="' + 'javascript:false' + '"';
  9.  
  10. 			}
  11. 			else if (typeof uri == 'string') {
  12. 				iframeHtml += ' src="' + uri + '"';
  13.  
  14. 			}
  15. 		}
  16. 		iframeHtml += ' />';
  17. 		jQuery(iframeHtml).appendTo(document.body);
  18.  
  19. 		return jQuery('#' + frameId).get(0);
  20. 	},
  21. 	createUploadForm: function (id, fileElementId) {
  22. 		//create form	
  23. 		var formId = 'jUploadForm' + id;
  24. 		var fileId = 'jUploadFile' + id;
  25. 		var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
  26. 		var oldElement = jQuery('#' + fileElementId);
  27. 		var newElement = jQuery(oldElement).clone();
  28. 		jQuery(oldElement).attr('id', fileId);
  29. 		jQuery(oldElement).before(newElement);
  30. 		jQuery(oldElement).appendTo(form);
  31. 		//set attributes
  32. 		jQuery(form).css('position', 'absolute');
  33. 		jQuery(form).css('top', '-1200px');
  34. 		jQuery(form).css('left', '-1200px');
  35. 		jQuery(form).appendTo('body');
  36. 		return form;
  37. 	},
  38.  
  39. 	ajaxFileUpload: function (s) {
  40. 		// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
  41. 		s = jQuery.extend({}, jQuery.ajaxSettings, s);
  42. 		var id = new Date().getTime();
  43. 		var form = jQuery.createUploadForm(id, s.fileElementId);
  44. 		var io = jQuery.createUploadIframe(id, s.secureuri);
  45. 		var frameId = 'jUploadFrame' + id;
  46. 		var formId = 'jUploadForm' + id;
  47. 		// Watch for a new set of requests
  48. 		if (s.global && !jQuery.active++) {
  49. 			jQuery.event.trigger("ajaxStart");
  50. 		}
  51. 		var requestDone = false;
  52. 		// Create the request object
  53. 		var xml = {};
  54. 		if (s.global)
  55. 			jQuery.event.trigger("ajaxSend", [xml, s]);
  56. 		// Wait for a response to come back
  57. 		var uploadCallback = function (isTimeout) {
  58. 			var io = document.getElementById(frameId);
  59. 			try {
  60. 				if (io.contentWindow) {
  61. 					xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
  62. 					xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
  63.  
  64. 				} else if (io.contentDocument) {
  65. 					xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
  66. 					xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
  67. 				}
  68. 			} catch (e) {
  69. 				jQuery.handleError(s, xml, null, e);
  70. 			}
  71. 			if (xml || isTimeout == "timeout") {
  72. 				requestDone = true;
  73. 				var status;
  74. 				try {
  75. 					status = isTimeout != "timeout" ? "success" : "error";
  76. 					// Make sure that the request was successful or notmodified
  77. 					if (status != "error") {
  78. 						// process the data (runs the xml through httpData regardless of callback)
  79. 						var data = jQuery.uploadHttpData(xml, s.dataType);
  80. 						// If a local callback was specified, fire it and pass it the data
  81. 						if (s.success)
  82. 							s.success(data, status);
  83.  
  84. 						// Fire the global callback
  85. 						if (s.global)
  86. 							jQuery.event.trigger("ajaxSuccess", [xml, s]);
  87. 					} else
  88. 						jQuery.handleError(s, xml, status);
  89. 				} catch (e) {
  90. 					status = "error";
  91. 					jQuery.handleError(s, xml, status, e);
  92. 				}
  93.  
  94. 				// The request was completed
  95. 				if (s.global)
  96. 					jQuery.event.trigger("ajaxComplete", [xml, s]);
  97.  
  98. 				// Handle the global AJAX counter
  99. 				if (s.global && ! --jQuery.active)
  100. 					jQuery.event.trigger("ajaxStop");
  101.  
  102. 				// Process result
  103. 				if (s.complete)
  104. 					s.complete(xml, status);
  105.  
  106. 				jQuery(io).unbind();
  107.  
  108. 				setTimeout(function () {
  109. 					try {
  110. 						jQuery(io).remove();
  111. 						jQuery(form).remove();
  112.  
  113. 					} catch (e) {
  114. 						jQuery.handleError(s, xml, null, e);
  115. 					}
  116.  
  117. 				}, 100);
  118.  
  119. 				xml = null;
  120.  
  121. 			}
  122. 		};
  123. 		// Timeout checker
  124. 		if (s.timeout > 0) {
  125. 			setTimeout(function () {
  126. 				// Check to see if the request is still happening
  127. 				if (!requestDone) uploadCallback("timeout");
  128. 			}, s.timeout);
  129. 		}
  130. 		try {
  131.  
  132. 			var form = jQuery('#' + formId);
  133. 			jQuery(form).attr('action', s.url);
  134. 			jQuery(form).attr('method', 'POST');
  135. 			jQuery(form).attr('target', frameId);
  136. 			if (form.encoding) {
  137. 				jQuery(form).attr('encoding', 'multipart/form-data');
  138. 			}
  139. 			else {
  140. 				jQuery(form).attr('enctype', 'multipart/form-data');
  141. 			}
  142. 			jQuery(form).submit();
  143.  
  144. 		} catch (e) {
  145. 			jQuery.handleError(s, xml, null, e);
  146. 		}
  147.  
  148. 		jQuery('#' + frameId).load(uploadCallback);
  149. 		return { abort: function () { } };
  150.  
  151. 	},
  152.  
  153. 	// handleError 方法在jquery1.4.2之后移除了，此处重写改方法
  154. 	handleError: function (s, xhr, status, e) {
  155. 		// If a local callback was specified, fire it
  156. 		if (s.error) {
  157. 			s.error.call(s.context || s, xhr, status, e);
  158. 		}
  159.  
  160. 		// Fire the global callback
  161. 		if (s.global) {
  162. 			(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
  163. 		}
  164. 	},
  165.  
  166. 	uploadHttpData: function (r, type) {
  167. 		var data = !type;
  168. 		data = type == "xml" || data ? r.responseXML : r.responseText;
  169. 		//20161018 add 带有<pre>标签
  170. 		var reg = /<pre.+?>(.+)<\/pre>/g;  
  171. 		var result = data.match(reg);
  172.         result = RegExp.$1;
  173. 		 data = $.parseJSON(result);
  174. 		// If the type is "script", eval it in global context
  175. 		if (type == "script")
  176. 			jQuery.globalEval(data);
  177. 		// Get the JavaScript object, if JSON is used.
  178. 		if (type == "json") {
  179. 			eval("data = " + data);
  180. 		}
  181. 		// evaluate scripts within html
  182. 		if (type == "html")
  183. 			jQuery("<div>").html(data).evalScripts();
  184.  
  185. 		return data;
  186. 	}
  187. });


posted on 2021-03-17 08:33  sunny123456  阅读(431)  评论(0)  编辑  收藏  举报