基于jQuery通过jQuery.form.js插件实现异步上传
2019/6/29 21:50:10
本文主要是介绍基于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.form.js插件实现异步上传的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习