• 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. });
  • 相关阅读:
    夜游遂宁滨江路
    易中天讲座十句人生感悟(发人深省，耐人寻味)
    遥望死海
    一直被忽略的成功之道：勤快并非优点，成功需要懒惰
    给别人以宽容，给自己以信心
    合理支配“财富”：经理人运用时间的12种典型模式
    三月的清晨
    学习的三重境界（想成功的人都不可错过）
    上班
    持续开发你的事业智慧：企业家保持冲锋势头的路径
  • 原文地址：https://www.cnblogs.com/sunny3158/p/14547169.html
Copyright © 2020-2023  润新知