ajax表单提交上传文件异步上传与文本编辑器

ajax表单提交上传文件

采用一个JS插件也可以不用直接使用ajax中的表单提交事件。

js 插件名称：jquery-form.js 文本编辑器：ckeditor

JS代码：

$("#form1").ajaxSubmit({
type: "POST",
url: "../../Info/ajax/ajaxToImgFile.ashx",
success: function (data) {
if (data == "0") {
alert("上传文件失败,请核实文件是否存在!");
}
else {


var objValString = $.parseJSON(data); //json 解析成json对象
var isBool = "1";
//var a = objValString.NameType;
switch (objValString.NameType) {
case "jpg":
isBool = "0";
break;
case "png":
isBool = "0";
break;
case "gif":
isBool = "0";
break;
default:
break;
}
if (isBool == "0") {//代表为图片了
CKEDITOR.instances.Content.insertHtml("<img src='" + objValString.NameFile + "' />");
} else {
CKEDITOR.instances.Content.insertHtml("<a href='" + objValString.NameFile + "' >文件下载</a>");
}


}
}

注意一点：<form id="form1" action="" method="post" enctype="multipart/form-data"> 中必须加入enctype="multipart/form-data"

CS代码：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write(queryString);
HttpPostedFile _upfile = context.Request.Files["btnfile"];
if (_upfile == null)
{
ResponseWriteEnd(context,"","4");//请选择要上传的文件
}
else
{
string fileName = _upfile.FileName;//获取文件名
string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();/*获取后缀名并转为小写： jpg*/
int bytes = _upfile.ContentLength;//获取文件的字节大小
//if (suffix != "jpg")
// ResponseWriteEnd(context,"2"); //只能上传JPG格式图片
//if (bytes > 1024 * 1024)
// ResponseWriteEnd(context,"3"); //图片不能大于1M
string fileString = "/admin/FileLoad/file/" + DateTime.Now.ToString("yyyyMMddHHmmss") + "." + suffix;
_upfile.SaveAs(HttpContext.Current.Server.MapPath(fileString));//保存图片
ResponseWriteEnd(context,fileString,suffix,"1"); //上传成功


}


}
/// <summary>
///
/// </summary>
/// <param name="context"></param>
/// <param name="query">路径地址</param>
/// <param name="key">文件后缀</param>
/// <param name="msg">类型</param>
private void ResponseWriteEnd(HttpContext context,string query,string key,string msg)
{
string str = "{\"NameMsg\":\"" + msg + "\",\"NameFile\":\"" + query + "\",\"NameType\":\"" + key + "\"}";
context.Response.Write(str);
context.Response.End();
}

可以实现图片直接异步输入文本编辑器或者文件输入下载格式，调用此JS方法你直接拿一个按钮事件就可，实现下面的异步上传与文本编辑器操作

如果有不明白的可以加入本群：NET高级进阶族 369685243