附demo示例源码,js插件实现异步上传
分类:关于计算机

正文重要从前台和后台代码剖判了jquery.form.js完毕异步上传的秘诀,分享给我们,具体代码如下

本文实例陈诉了jQuery插件之jQuery.Form.js用法。分享给我们供大家参考,具体如下:

前台代码:

一、jQuery.Form.js 插件的效率是完毕Ajax提交表单。

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <script src="~/Scripts/jquery-1.7.2.min.js"></script>
 <script src="~/Scripts/jquery.form.js"></script>
 <title>upload</title>
</head>
<body>
 <form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload">
  文件名称:<input name="fileName" type="text"><br />
  上传文件:<input name="myfile" type="file" multiple="multiple"><br />
  <input id="submitBtn" type="submit" value="提交">
  <img src="#" alt="my img" id="iceImg" width="300" height="300" style="display: block;" />
 </form>


 <input type="text" name="height" value="170" />
 <input id="sbtn2" type="button" value="提交表单2">

 <input type="text" name="userName" value="" />
 <script type="text/javascript">
  $(function () {
   $("#fileForm").ajaxForm({
    //定义返回JSON数据,还包括xml和script格式
    //clearForm Boolean值属性,表示是否在表单提交成功后情况表单数据
    //dataType 提交成果后返回的数据格式,可选值包括xml,json或者script
    //target 服务器返回信息去更新的页面对象,可以是jquery选择器字符串或者jquer对象或者DOM对象。
    //type 提交类型可以是”GET“或者”POST“
    //url 表单提交的路径
    dataType: 'json',
    beforeSend: function () {
     //表单提交前做表单验证
     $("#myh1").show();
    },
    success: function (data) {
     //提交成功后调用
     //alert(data.message);
     $("#iceImg").attr('src', '/upload/img/' + data.fileName);
     $("#myh1").hide();
     //防止重复提交的方法
     //1.0 清空表单数据
     $('#fileForm').clearForm();
     //2.0 禁用提交按钮

     //3.0 跳转页面
    }
   });


   $("#myfile").change(function () {
    $("#submitBtn").click();
   });

   $("#iceImg").click(function () {
    $("#myfile").click();
   });
  });
 </script>
 <h1 id="myh1" style="display: none;">加载中...</h1>
</body>
</html>

方法:

后台代码:

1.formSerilize()  用于体系化表单中的数据,并将其机动整理成符合AJAX异步乞求的UEnclaveL地址格式。

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IceMvc.Controllers
{
 public class UploadController : Controller
 {
  //
  // GET: /Upload/

  public ActionResult Index()
  {
   return View();
  }

  [HttpPost]
  public ActionResult Upload()
  {
   var filesList = Request.Files;
   for (int i = 0; i < filesList.Count; i++)
   {
    var file = filesList[i];
    if (file.ContentLength > 0)
    {
     if (file.ContentLength > 5242880)
     {
      return Content("<script>alert('注册失败!因为您选择图片文件不能大于5M.');window.location='/User/Register';</script>");
     }

     //得到原图的后缀
     string extName = System.IO.Path.GetExtension(file.FileName);
     //生成新的名称
     string newName = Guid.NewGuid() + extName;

     string imgPath = Server.MapPath("/upload/img/") + newName;

     if (file.ContentType.Contains("image/"))
     {
      using (Image img = Image.FromStream(file.InputStream))
      {
       img.Save(imgPath);
      }
      var obj = new { fileName = newName };
      return Json(obj);
     }
     else
     {
      //return Content("<script>alert('注册失败!因为您未选择图片文件.');window.location='/User/Register';</script>");
     }
    }
   }

   return Content("");
  }

  public ActionResult Afupload()
  {
   return View();
  }
 }
}

2.clearForm()   清除表单中具有输入值的剧情。

如上就是本着jquery.form.js完结异步上传的议程,希望对我们的就学抱有协助。

3.restForm    重新载入参数表单中具有的字段内容。将在有所表单中的字段恢复生机到页面加载时的默许值。

您或者感兴趣的篇章:

  • jquery.form.js框架实现文件上传功效案例深入分析(springmvc)
  • 选拔jQuery.form.js/springmvc框架达成公文上传功用
  • Struts2+jquery.form.js完结图片与公事上传的方法
  • 使用jquery.form.js实现图片上传的点子
  • jQuery插件之jQuery.Form.js用法实例深入分析(附demo示例源码)
  • jquery.form.js达成将form提交转为ajax方式提交的艺术
  • jquery.form.js用法之清空form的情势
  • 缓慢解决3.01版的jquery.form.js普通话乱码难点的消除方法
  • jQuery.form.js的运用详解

疑问:ajaxForm()与ajaxSubmit()的区别:

答案:$("#form1").ajaxForm();  也正是以下两行:

$("#form1".submit)(function(){
 $("#form1").ajaxSubmit();
return false;
})

也正是说ajaxFrom()会活动阻止表单提交。而ajaxSubmit()不会自行阻止表单提交,想阻止表单提交,要团结return false;

本领1:要是指望表单提交成功后不跳转,那么一行轻巧的代码就可见落到实处,大致与不使用表单提交是同样的:

$("#MailForm").ajaxSubmit(function(message) {
  alert("表单提交已成功!");
});

注意:ajaxForm()与ajaxForm()都足以未有参数可能收受1个参数。该参数既可以够是贰个回调函数,也得以是多少个options对象。该指标作用非常有力,表达如下:

var options={
 url:url, //form提交数据的地址
 type:type, //form提交的方式(method:post/get)
 target:target, //服务器返回的响应数据显示在元素(Id)号确定
 beforeSubmit:function(), //提交前执行的回调函数
 success:function(), //提交成功后执行的回调函数
 dataType:null, //服务器返回数据类型
 clearForm:true, //提交成功后是否清空表单中的字段值
 restForm:true, //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
 timeout:6000 //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
}

例子:

页面js代码:

<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jQuery.Form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $(":submit").click(function () {
    var options = {
      url: "indexAjax.aspx",
      target: "#div2",
      success: function () {
        alert("ajax请求成功");
      }
    };
    $("#form1").ajaxForm(options);
  })
})
</script>

页面HTML代码:

<div id="div1">
<form id="form1" method="get" action="#">
  <p>我的名字:<input type="text" name="name" value="请输入内容" /></p>
  <p>我的偶像是:<input type="radio" name="Idol" value="刘德华" />刘德华  <input type="radio" name="Idol" value="张学友" />张学友</p>
  <p>我喜欢的音乐类型:<input type="checkbox" name="musictype" value="1.摇滚">摇滚 <input type="checkbox" name="musictype" value="2.轻松">轻柔 <input type="checkbox" name="musictype" value="3.爵士">爵士</p>
  <p><input type="submit" value="确认" /></p>
</form>
</div>
<div id="div2">
</div>

后台:indexAjax.aspx.cs代码

protected void Page_Load(object sender, EventArgs e)
{
  string strName = Request["name"];
  string strIdol = Request["Idol"];
  string strMusicType = Request["musictype"];
  Response.Clear();
  Response.Write("我的名字是:" + strName + ";  我的偶像是:" + strIdol + ";  我喜欢的音乐类型:" + strMusicType);
  Response.End();
}

演示代码点击这里本站下载.rar)。

至于越来越多jQuery插件用法还可参看本站相关专项论题:《jQuery常用插件及用法总括》。

指望本文所述对我们jQuery程序设计有着扶助。

你恐怕感兴趣的稿子:

  • jquery.form.js框架达成公文上传功效案例分析(springmvc)
  • 使用jQuery.form.js/springmvc框架达成文件上传作用
  • Struts2+jquery.form.js达成图片与公事上传的章程
  • 行使jquery.form.js实现图片上传的不二诀要
  • 据书上说jQuery通过jQuery.form.js插件实现异步上传
  • jquery.form.js实现将form提交转为ajax格局交给的点子
  • jquery.form.js用法之清空form的秘技
  • 缓慢解决3.01版的jquery.form.js中文乱码难点的缓慢解决方法
  • jQuery.form.js的利用详解

本文由正版必中一肖图发布于关于计算机,转载请注明出处:附demo示例源码,js插件实现异步上传

上一篇:ajax进行即时验证实例详解,实现代码 下一篇:没有了
猜你喜欢
热门排行
精彩图文