用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
发布时间:2020-12-15 20:30:26 所属栏目:asp.Net 来源:网络整理
导读:This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website. Fine Uploader 不依赖于 jQuery,也就是说不引
This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website. Fine Uploader 不依赖于 jQuery,也就是说不引用jquery.js,也可以正常使用。同时,它也提供了 jQuery Wrapper,可以方便地与jQuery集成。 这篇博文中的示例代码用的就是 Fine Uploader jQuery Wrapper。下面看示例代码: Web前端实现 1. 下载jQuery Plug-in Fine Uploader,下载地址:https://github.com/valums/file-uploader/wiki/Releases 编程小技巧Fine Uploader下载地址 http://www.aspzz.cn/codes/70040.html 2. html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片上传 - 博客园</title> <link href="/css/fineuploader.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="/scripts/jquery.fineuploader-3.0.min.js"></script> </head> <body> <div id="jquery-wrapped-fine-uploader"></div> <script> $(function () { $('#jquery-wrapped-fine-uploader').fineUploader({ request: { endpoint: '/ImageUploader/ProcessUpload' } }); }); </script> </body> </html> 代码说明: a) <div id="jquery-wrapped-fine-uploader"></div>用于显示上传按钮 b) endpoint 设定的是上传时服务端处理ajax请求的网址。 3. 浏览器中的显示效果 服务器 ASP.NET MVC 实现代码 Fine Uploader 的源代码中用 VB.NET 实现了一个 Controller(UploadController.vb),我们在使用时改为了 C# 代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; using System.Web.Mvc; namespace CNBlogs.Upload.Web.Controllers { public class ImageUploaderController : Controller { const int ChunkSize = 1024 * 1024; public ActionResult Upload() { return View(); } public ActionResult ProcessUpload(string qqfile) { using (var stream = Request.InputStream) { using (var br = new BinaryReader(stream)) { WriteStream(br,qqfile); } } return Json(new { success = true }); } private void WriteStream(BinaryReader br,string fileName) { byte[] fileContents = new byte[] { }; var buffer = new byte[ChunkSize]; while (br.BaseStream.Position < br.BaseStream.Length - 1) { if (br.Read(buffer,ChunkSize) > 0) { fileContents = fileContents.Concat(buffer).ToArray(); } } using (var fs = new FileStream(@"C:temp" + DateTime.Now.ToString("yyyyMMddHHmmSS") + Path.GetExtension(fileName).ToLower(),FileMode.Create)) { using (var bw = new BinaryWriter(fs)) { bw.Write(fileContents); } } } } } 服务器端实现改进版 复制代码 代码如下: public ActionResult ProcessUpload(string qqfile) { using (var inputStream = Request.InputStream) { using (var flieStream = new FileStream(@"c:temp" + qqfile,FileMode.Create)) { inputStream.CopyTo(flieStream); } } return Json(new { success = true }); } 图片上传结果演示 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 如何在asp.net webform中使用异步/等待实现异步页面?
- 如何为ASP.NET MVC Web应用程序中使用的图像添加缓存?
- ASP.NET MVC的Model元数据与Model模板:将”ListControl”引
- asp.net – ASP错误:由于对象的当前状态,操作无效
- asp.net – 您在实施/使用WebDAV方面有哪些经验?
- 自动完成 – ASP.NET MVC3 Razor – 自动完成教程?
- asp.net core标签助手的高级用法TagHelper+Form
- asp.net-mvc – 在asp.net MVC3中调用局部视图
- asp.net – 如何在.Net Core中间件中获取当前子域?
- 重建后,ASP.NET / IIS中的会话为空
推荐文章
站长推荐
热点阅读