C#+aspx+ajaxfileupload 实现图片上传

最新推荐文章于 2021-08-06 21:05:17 发布

蝶恋花雨

最新推荐文章于 2021-08-06 21:05:17 发布

阅读量4.5k

点赞数

分类专栏： .NET And C# Jquery And JavaScript 文章标签： ajaxfileupload 图片上传

本文链接：https://blog.csdn.net/kongwei521/article/details/52910970

版权

.NET And C# 同时被 2 个专栏收录

136 篇文章 3 订阅

订阅专栏

Jquery And JavaScript

34 篇文章 0 订阅

订阅专栏

Html 代码及调用方法：

<!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>
</head>
<body>
    <form id="form1" runat="server">
          <div style="margin:0 auto;text-align:center;">
  <p>
      <asp:Image  ID="imgShow" runat="server" Width="120" Height="120" ImageUrl="~/assets/images/nophoto.gif"/>
    
       </p>
        <p>    <input name="file" id="fUpLoad" type="file"/><input type="hidden" id="Hfurl" runat="server"/>
      <input type="hidden" id="hfStatus" runat="server"/></p>
       <p>
         <input type="button" value="上传" id="iUpLoad"/>
       </p> 
            </div>
    	<script src="assets/js/jquery-1.8.2.min.js"></script>
    <script src="plugins/uploadify/ajaxfileupload.js"></script>
		<script type="text/javascript">
			$(function () {
				$("#iUpLoad").click(function () {
					ajaxFileUpload();
				})
			})
			function ajaxFileUpload() {
				$.ajaxFileUpload
				(
								{
								   url: 'UpLoadHeadImg.aspx?random=' + Math.random(), //用于文件上传的服务器端请求地址

									//secureuri: false, //一般设置为false
									fileElementId: 'fUpLoad', //文件上传空间的id属性  <input type="file" id="file" name="file" />
									dataType: 'json', //返回值类型 一般设置为json
									success: function (data, status)  //服务器成功响应处理函数
									{
                                        alert(data);
									    $("#imgShow").attr("src", data.imgurl);
										$("#Hfurl").val(data.imgurl); //alert($("#hfDel").val());
										if (typeof (data.error) != 'undefined') {
											if (data.error != '') {
												alert(data.error);
											} else {
												//alert(data.msg);
											}
										}
									},
									error: function (data, status, e)//服务器响应失败处理函数
									{
										alert(e);
									}
								}
				)
				return false;
			}
		</script>
          <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
    </form>
    	</body>
</html>

后台代码：

	protected void Page_Load(object sender, EventArgs e)
		{
			log4net.ILog log = log4net.LogManager.GetLogger(this.GetType().Name);
			int count = Request.Files.Count;
			string res = string.Empty;
			string error = string.Empty;
			string imgurl = string.Empty; ;
			if (count > 0)
			{
				try
				{
					HttpPostedFile File1 = Request.Files[0];
					string suffix = Path.GetExtension(File1.FileName).ToLower();
					string path = Server.MapPath("UpLoadImg/HeadImage");  //用来生成文件夹

					if (File1.ContentLength / 4096 > 4096)
					{
						error = "单张头像不能超过4096K(4M)，请重新选择头像上传。";
					}
					else
					{

						if (!Directory.Exists(path))
							Directory.CreateDirectory(path);
						var savepath = "UpLoadImg/HeadImage/" + Guid.NewGuid() + suffix;
						if (suffix.Equals(".jpg") || suffix.Equals(".png") || suffix.Equals(".gif") || suffix.Equals(".jpeg"))
						{
							File1.SaveAs(Server.MapPath(savepath));
						}

						imgShow.ImageUrl = savepath; imgurl = savepath;
						hfStatus.Value = "1"; Hfurl.Value = savepath;
						error = "上传成功";
						res = "{\"info\":\"" + error + "\",\"data\":\"1\",\"imgurl\":\"" + savepath + "\"}";
					}
					if (HttpContext.Current.Request.Cookies["UserLogin"] != null)
					{
						log.Info(new LogContent(SearchDataClass.GetIPAddress(), 
HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"],
	"上传头像图片信息", "上传图片为" + File1.FileName + "的图片路径" + imgurl + "成功,信息为。" + res));
					}
					else
					{
						log.Info(new LogContent(SearchDataClass.GetIPAddress(), "system",
	"上传头像图片信息", "上传图片为" + File1.FileName + "的图片路径" + imgurl + "成功,信息为。" + res));

					}
				}
				catch (Exception ex)
				{
					hfStatus.Value = "0";
					res = "{\"info\":\"" + ex.Message + "\",\"data\":\"0\",\"imgurl\":\"\"}";
					if (HttpContext.Current.Request.Cookies["UserLogin"] != null)
					{
						log.Fatal(new LogContent(SearchDataClass.GetIPAddress(),
 HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"], "上传头像图片信息", res));
					}
					else
					{
						log.Fatal(new LogContent(SearchDataClass.GetIPAddress(), "system",
												 "上传头像图片信息", res));
					}

				}
				Response.Write(res);
				Response.End();
			}
			else
			{
				if (HttpContext.Current.Request.Cookies["UserLogin"] != null)
				{
					log.Warn(new LogContent(SearchDataClass.GetIPAddress(), 
HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"], "上传头像图片信息", "无上传头像图片信息。"));
				}
				else
				{
					log.Warn(new LogContent(SearchDataClass.GetIPAddress(), "system", "上传头像图片信息", "无上传头像图片信息。"));

				}
			}

		}

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

jQuery.extend({
	createUploadIframe: function (id, uri) {
		//create frame
		var frameId = 'jUploadFrame' + id;
		var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
		if (window.ActiveXObject) {
			if (typeof uri == 'boolean') {
				iframeHtml += ' src="' + 'javascript:false' + '"';

			}
			else if (typeof uri == 'string') {
				iframeHtml += ' src="' + uri + '"';

			}
		}
		iframeHtml += ' />';
		jQuery(iframeHtml).appendTo(document.body);

		return jQuery('#' + frameId).get(0);
	},
	createUploadForm: function (id, fileElementId) {
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
		var oldElement = jQuery('#' + fileElementId);
		var newElement = jQuery(oldElement).clone();
		jQuery(oldElement).attr('id', fileId);
		jQuery(oldElement).before(newElement);
		jQuery(oldElement).appendTo(form);
		//set attributes
		jQuery(form).css('position', 'absolute');
		jQuery(form).css('top', '-1200px');
		jQuery(form).css('left', '-1200px');
		jQuery(form).appendTo('body');
		return form;
	},

	ajaxFileUpload: function (s) {
		// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
		s = jQuery.extend({}, jQuery.ajaxSettings, s);
		var id = new Date().getTime();
		var form = jQuery.createUploadForm(id, s.fileElementId);
		var io = jQuery.createUploadIframe(id, s.secureuri);
		var frameId = 'jUploadFrame' + id;
		var formId = 'jUploadForm' + id;
		// Watch for a new set of requests
		if (s.global && !jQuery.active++) {
			jQuery.event.trigger("ajaxStart");
		}
		var requestDone = false;
		// Create the request object
		var xml = {};
		if (s.global)
			jQuery.event.trigger("ajaxSend", [xml, s]);
		// Wait for a response to come back
		var uploadCallback = function (isTimeout) {
			var io = document.getElementById(frameId);
			try {
				if (io.contentWindow) {
					xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
					xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;

				} else if (io.contentDocument) {
					xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
					xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
				}
			} catch (e) {
				jQuery.handleError(s, xml, null, e);
			}
			if (xml || isTimeout == "timeout") {
				requestDone = true;
				var status;
				try {
					status = isTimeout != "timeout" ? "success" : "error";
					// Make sure that the request was successful or notmodified
					if (status != "error") {
						// process the data (runs the xml through httpData regardless of callback)
						var data = jQuery.uploadHttpData(xml, s.dataType);
						// If a local callback was specified, fire it and pass it the data
						if (s.success)
							s.success(data, status);

						// Fire the global callback
						if (s.global)
							jQuery.event.trigger("ajaxSuccess", [xml, s]);
					} else
						jQuery.handleError(s, xml, status);
				} catch (e) {
					status = "error";
					jQuery.handleError(s, xml, status, e);
				}

				// The request was completed
				if (s.global)
					jQuery.event.trigger("ajaxComplete", [xml, s]);

				// Handle the global AJAX counter
				if (s.global && ! --jQuery.active)
					jQuery.event.trigger("ajaxStop");

				// Process result
				if (s.complete)
					s.complete(xml, status);

				jQuery(io).unbind();

				setTimeout(function () {
					try {
						jQuery(io).remove();
						jQuery(form).remove();

					} catch (e) {
						jQuery.handleError(s, xml, null, e);
					}

				}, 100);

				xml = null;

			}
		};
		// Timeout checker
		if (s.timeout > 0) {
			setTimeout(function () {
				// Check to see if the request is still happening
				if (!requestDone) uploadCallback("timeout");
			}, s.timeout);
		}
		try {

			var form = jQuery('#' + formId);
			jQuery(form).attr('action', s.url);
			jQuery(form).attr('method', 'POST');
			jQuery(form).attr('target', frameId);
			if (form.encoding) {
				jQuery(form).attr('encoding', 'multipart/form-data');
			}
			else {
				jQuery(form).attr('enctype', 'multipart/form-data');
			}
			jQuery(form).submit();

		} catch (e) {
			jQuery.handleError(s, xml, null, e);
		}

		jQuery('#' + frameId).load(uploadCallback);
		return { abort: function () { } };

	},

	// handleError 方法在jquery1.4.2之后移除了，此处重写改方法
	handleError: function (s, xhr, status, e) {
		// If a local callback was specified, fire it
		if (s.error) {
			s.error.call(s.context || s, xhr, status, e);
		}

		// Fire the global callback
		if (s.global) {
			(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
		}
	},

	uploadHttpData: function (r, type) {
		var data = !type;
		data = type == "xml" || data ? r.responseXML : r.responseText;
		//20161018 add 带有<pre>标签
		var reg = /<pre.+?>(.+)<\/pre>/g;  
		var result = data.match(reg);
        result = RegExp.$1;
		 data = $.parseJSON(result);
		// If the type is "script", eval it in global context
		if (type == "script")
			jQuery.globalEval(data);
		// Get the JavaScript object, if JSON is used.
		if (type == "json") {
			eval("data = " + data);
		}
		// evaluate scripts within html
		if (type == "html")
			jQuery("<div>").html(data).evalScripts();

		return data;
	}
});