ajax实现文件表单上传,ajax文件异步实现表单上传

这次给大家带来ajax文件异步实现表单上传，ajax文件异步实现表单上传的注意事项有哪些，下面就是实战案例，一起来看一下。

项目中用户上传总是少不了的，下面就主要的列举一下表单上传和ajax上传！注意： context.Request.Files不适合对大文件进行操作，下面列举的主要对于小文件上传的处理！

资源下载：

一、jQuery官方下载地址：https://jquery.com/download/

一.表单上传：

html客户端部分：

选择文件:

一般处理程序服务器端：public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

HttpPostedFile file1 = context.Request.Files["file1"];

helper.uploadFile(file1, "~/upload/");//这里就是对相应方法进行调用

context.Response.Write("ok");//提示执行成功

}

上传代码的封装：///

/// 上传图片

///

/// 通过form表达提交的文件

/// 文件要保存的虚拟路径

public static void uploadImg(HttpPostedFile file,string virpath)

{

if (file.ContentLength > 1024 * 1024 * 4)

{

throw new Exception("文件不能大于4M");

}

string imgtype = Path.GetExtension(file.FileName);

if(imgtype!=".jpg"&&imgtype!=".jpeg") //图片类型进行限制

{

throw new Exception("请上传jpg或JPEG图片");

}

using (Image img = Bitmap.FromStream(file.InputStream))

{

string savepath = HttpContext.Current.Server.MapPath(virpath+file.FileName);

img.Save(savepath);

}

}

///

/// 上传文件

///

/// 通过form表达提交的文件

/// 文件要保存的虚拟路径

public static void uploadFile(HttpPostedFile file, string virpath)

{

if (file.ContentLength > 1024 * 1024 * 6)

{

throw new Exception("文件不能大于6M");

}

string imgtype = Path.GetExtension(file.FileName);

//imgtype对上传的文件进行限制

if (imgtype != ".zip" && imgtype != ".mp3")

{

throw new Exception("只允许上传zip、rar....文件");

}

string dirFullPath= HttpContext.Current.Server.MapPath(virpath);

if (!Directory.Exists(dirFullPath))//如果文件夹不存在，则先创建文件夹

{

Directory.CreateDirectory(dirFullPath);

}

file.SaveAs(dirFullPath + file.FileName);

}

二.Ajax文件异步上传：

注明：既然有了表单上传为什么又要ajax上传呢？因为表单上传过程中，整个页面就刷新了！ajax异步上传就可以达到只刷新局部位置，下面就简单看看ajax上传吧！

html客户端部分：

$(function () {

$("#upload").click(function () {

$("#imgWait").show();

var formData = new FormData();

formData.append("myfile", document.getElementById("file1").files[0]);

$.ajax({

url: "upload.ashx",

type: "POST",

data: formData,

/**

*必须false才会自动加上正确的Content-Type

*/

contentType: false,

/**

* 必须false才会避开jQuery对 formdata 的默认处理

* XMLHttpRequest会对 formdata 进行正确的处理

*/

processData: false,

success: function (data) {

if (data.status == "true") {

alert("上传成功！");

}

if (data.status == "error") {

alert(data.msg);

}

$("#imgWait").hide();

},

error: function () {

alert("上传失败！");

$("#imgWait").hide();

}

});

});

});

选择文件:

一般处理程序服务器端：public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/html";

if (context.Request.Files.Count > 0)

{

HttpPostedFile file1 = context.Request.Files["myfile"];

helper.uploadFile(file1, "~/upload/"); //这里引用的是上面封装的方法

WriteJson(context.Response, "true", "");

}

else

{

WriteJson(context.Response, "error", "请选择要上传的文件");

}

}

json代码封装：public static void WriteJson(HttpResponse response,

string status1, string msg1, object data1 = null)

{

response.ContentType = "application/json";

var obj = new { status = status1, msg = msg1, data = data1 };

string json = new JavaScriptSerializer().Serialize(obj);

response.Write(json);

}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

AjaxFileUpload怎么动态的添加文件上传框

Ajax和jsonp在项目中的实战总结