https://blog.csdn.net/kongwei521/article/details/52910970
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;
- }
- });