基于jQuery通过jQuery.form.js插件实现异步上传

2019-11-20 11:01:49

字体：大中小

来源：转载

供稿：网友

本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法，分享给大家，具体代码如下

前台代码：

@{ 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>

后台代码：

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

以上就是针对jquery.form.js实现异步上传的方法，希望对大家的学习有所帮助。

上一篇：轻松使用jQuery双向select控件Bootstrap Dual Listbox

下一篇：推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)