你的位置:首页 > Java教程

[Java教程]jquery.form.js实现异步上传


 前台页面

 1 @{ 2   Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7   <meta name="viewport" content="width=device-width" /> 8   <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9   <script src="~/Scripts/jquery.form.js"></script>10   <title>upload</title>11 </head>12 <body>13   <form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload">14     文件名称:<input name="fileName" type="text"><br />15     上传文件:<input name="myfile" type="file" multiple="multiple"><br />16     <input id="submitBtn" type="submit" value="提交">17     <img src="#" alt="my img" id="iceImg" width="300" height="300" style="display: block;" />18   </form>19 20   21   <input type="text" name="height" value="170" />22   <input id="sbtn2" type="button" value="提交表单2">23 24   <input type="text" name="userName" value="" />25   <script type="text/javascript">26     $(function () {27       $("#fileForm").ajaxForm({28         //定义返回JSON数据,还包括29         //clearForm Boolean值属性,表示是否在表单提交成功后情况表单数据30         //dataType 提交成果后返回的数据格式,可选值包括31         //target 服务器返回信息去更新的页面对象,可以是jquery选择器字符串或者jquer对象或者DOM对象。32         //type 提交类型可以是”GET“或者”POST“33         //url 表单提交的路径34         dataType: 'json',35         beforeSend: function () {36           //表单提交前做表单验证37           $("#myh1").show();38         },39         success: function (data) {40           //提交成功后调用41           //alert(data.message);42           $("#iceImg").attr('src', '/upload/img/' + data.fileName);43           $("#myh1").hide();44           //防止重复提交的方法45           //1.0 清空表单数据46           $('#fileForm').clearForm();47           //2.0 禁用提交按钮48 49           //3.0 跳转页面50         }51       });52 53 54       $("#myfile").change(function () {55         $("#submitBtn").click();56       });57 58       $("#iceImg").click(function () {59         $("#myfile").click();60       });61     });62   </script>63   <h1 id="myh1" style="display: none;">加载中...</h1>64 </body>65 </html>

 后台代码

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();    }  }}