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

更新时间：2015年12月13日 09:21:27 作者：iceKnight

这篇文章主要介绍了基于jQuery通过jQuery.form.js插件实现异步上传，代码很详细，感兴趣的小伙伴们可以参考一下

本文主要从前台和后台代码分析了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实现二维码扫描功能
这篇文章主要介绍了jQuery利用jquery.qrcode.min.js插件实现二维码扫描功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
jquery计算出left和top,让一个div水平垂直居中的简单实例
下面小编就为大家带来一篇jquery计算出left和top,让一个div水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
jQuery getJSON 处理json数据的代码
Ashx处理程序:如果需要返回json格式的对象，需要把mime类型设置为："application/json"。
2010-07-07
JQuery获取或设置ckeditor的数据(示例代码)
JQuery获取或设置ckeditor的数据(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
jquery uploadify如何取消已上传成功文件
这篇文章主要为大家详细介绍了jquery uploadify如何取消已上传成功文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
jquery ajax例子返回值详解
$.ajax()跟($.post(),$.get())最主要的差别就是成功回调后,执行success. . $.post(),$.get()就只能简单的做下传递 ,返回. .后续工作没法继续.所以看情况调用
2012-09-09
jquery dialog获取焦点的方法
这篇文章主要介绍了jquery dialog获取焦点的方法,结合实例形式分析了jQuery UI插件对话框dialog的基本使用技巧,需要的朋友可以参考下
2017-02-02
jQuery lazyload 的重复加载错误以及修复方法
jQuery lazyload是一款延迟加载图片的的插件，原意是按需加载，当图片出现在可视区域时进行加载，但是官方的插件经过firebug的检测可知，并不能节省流量开支，反而有重复加载的现象。
2010-11-11
懒加载实现的分页&&网站footer自适应
本文主要介绍了wap手机端懒加载分页，web电脑端懒加载分页以及web电脑端footer底部固定。具有很好的参考价值，下面就跟着小编一起来看下吧
2016-12-12
PHP+jquery+ajax实现分页
这篇文章主要为大家详细介绍了PHPjquery+ajax实现分页的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12