加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 02:04:27 所属栏目:百科 来源:网络整理
导读:ajax表单提交上传文件 采用一个JS插件也可以不用直接使用ajax中的表单提交事件。 js 插件名称:jquery-form.js 文本编辑器:ckeditor JS代码: $("#form1").ajaxSubmit({ type: "POST", url: "../../Info/ajax/ajaxToImgFile.ashx", success: function (data

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读