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;
}
});
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）