有时候我们需要上传图片时不刷新页面，那么Ajax就是很好的东西哦。之前在网上找了很多的资料都不对，不是这里就是那里错，这是本人亲自测试了的哈，是没有问题的，若有不足之处希望指正。我用的.net，对了这里还需要引用Jquery跟Jquery.form.js两个文件，没看到上传附件在哪里咯，需要的朋友可以给我留言哈
前台代码 Default2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="admin/js/jquery.js" type="text/javascript"></script>
<script src="admin/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
function TajaxFileUpload() {
var imgname = $.trim($("#File1").val());
if (imgname != "") {
$("#form1").ajaxSubmit({
success: function (html, status) {
if (status == "success") {
var json = eval(‘(‘ + html + ‘)‘);
if (json.state == "success") { //上传成功
alert("上传成功!");
}
else {
alert(json.msg + "上传失败!");
}
}
},
error: function (error) {
alert(error);
},
url: ‘admin/ajax/upload.ashx‘, /*设置post提交到的页面*/
type: "post", /*设置表单以post方法提交*/
dataType: "text" /*设置返回值类型为文本*/
});
}
else {
alert("请上传图片！");
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="File1" type="file" name="picture" />
<input type="button" value="上 传" onclick="TajaxFileUpload()" />
</div>
</form>
</body>
</html>
Ajax页面代码 upload.ashx
<%@ WebHandler Language="C#" Class="upload" %>
using System;
using System.Web;
using System.IO;
using System.Text;
using System.Net;
public class upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
try
{
string time = DateTime.Now.ToString("yyyyMMdd").Trim();
string fileName = time;
HttpPostedFile pic = context.Request.Files["picture"];
string foldPath = HttpContext.Current.Server.MapPath("~/UploadFile/") + fileName+"\\";
//foldPath = foldPath + fileName;
DirectoryInfo di = new DirectoryInfo(foldPath);
if (!di.Exists)//如果文件夹目录不存在
{
di.Create();//新建文件夹
}
string imageName = UpLoadImage(pic, foldPath);
context.Response.Write("{state:‘success‘,msg:‘上传成功：" + imageName + "‘}");
}
catch (Exception ex)
{
context.Response.Write("{state:‘error‘,msg:‘" + ex.Message + "‘}");
}
}
#region 上传图片
/// <summary>
/// 上传图片
/// </summary>
/// <param name="imgfile">文件http流</param>
/// <param name="nowpath">所需放置的文件路径</param>
/// <returns>上传成功，返回字符串，否则，抛出异常</returns>
public static string UpLoadImage(HttpPostedFile imgfile, string nowpath)
{
try
{
string serverPath = System.Web.HttpContext.Current.Server.MapPath("~");
string toFilePath = Path.Combine(serverPath, nowpath);
//获取要保存的文件信息
FileInfo file = new FileInfo(imgfile.FileName);
//获得文件扩展名
string fileNameExt = file.Extension;
//验证合法的文件
if (CheckImageExt(fileNameExt))
{
//生成将要保存的随机文件名
string fileName = DateTime.Now.ToString("yyyyMMddHHmmss").Trim() + fileNameExt;
//获得要保存的文件路径
string serverFileName = toFilePath +fileName;
//物理完整路径
string toFileFullPath = serverFileName; //HttpContext.Current.Server.MapPath(toFilePath);
//将要保存的完整文件名
string toFile = toFileFullPath;//+ fileName;
///创建WebClient实例
WebClient myWebClient = new WebClient();
//设定windows网络安全认证 方法1
myWebClient.Credentials = CredentialCache.DefaultCredentials;
////设定windows网络安全认证 方法2
imgfile.SaveAs(toFile);
string relativePath = fileName;
return relativePath;
}
else
{
throw new Exception("文件格式非法，请上传gif|jpg|bmp|png格式的文件。");
}
}
catch
{
throw;
}
}
#endregion
#region 图片上传格式和文件名
/// <summary>
/// 检查是否为合法的上传图片
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
public static bool CheckImageExt(string _ImageExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".bmp", ".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (string.Compare(allowExt[i], _ImageExt, true) == 0)
{ return true; }
}
return false;
}
private static string GetImageName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
serial.Append(rd.Next(0, 999999).ToString());
return serial.ToString();
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}
最后上传的图片的保存路径效果图如下：
时间： 2024-10-08 23:12:54