如何用Fine Uploader+ASP.NET MVC实现ajax文件上传

Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件。

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

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, 0, 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);
                }
            }
        }
    }
}

更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/webkf/ajax/

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, c# .net mvc
, request.inputstream
, 代码
, upload
, using
, system
, fine
, jquery file upload
, 上传mvc下载
, uploadifyfile上传c#jquery
, Uploader
MVC图片上传
,以便于您获取更多的相关知识。

时间: 2024-12-30 05:24:33

如何用Fine Uploader+ASP.NET MVC实现ajax文件上传的相关文章

用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]_实用技巧

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,也可以正常使用.同时,

ASP.NET 2.0 多文件上传小经验

asp.net|上传     想实现任意多个文件上传的功能,点击一次按钮可以添加一个文件上传框,以前在网络硬盘上看到过.JavaScript我知道怎么实现任意添加上传文件控件,问题是添加的是Html控件,我不懂怎么让服务器端可以获取文件.     于是上google搜索"ASP.NET 多文件上传",还真找到一篇文件,标题为<在ASP.NET中实现多文件上传>,文章里面是VB.NET实现的,功能和我要的一模一样,我主要是要看服务器端怎么获取客户端上传的文件,看了文中的代码,

ASP.NET中常用的文件上传下载方法

asp.net|上传|下载     文件的上传下载是我们在实际项目开发过程中经常需要用到的技术,这里给出几种常见的方法,本文主要内容包括:1.如何解决文件上传大小的限制2.以文件形式保存到服务器3.转换成二进制字节流保存到数据库以及下载方法4.上传Internet上的资源 第一部分:    首先我们来说一下如何解决ASP.NET中的文件上传大小限制的问题,我们知道在默认情况下ASP.NET的文件上传大小限制为2M,一般情况下,我们可以采用更改WEB.Config文件来自定义最大文件大小,如下:<

asp.net批量多选文件上传解决方案_实用技巧

多选文件上传,已经非常多了,选择性多了可能有时候要比较下哪个更合适,结合到项目中使用更方便才是最重要的.很多的多选上传基本上都是调用的swf文件,确实用flash 或flex开发一个多选上传的功能很方便,比如flex里内置的FileReferenceList对象本身就支持文件的多选,有这个的话就方便多了,下面要说的主要也是基于flex开发的一个多选上传功能.主要实现的功能如下: 一.选择多个文件上传并显示单个文件的上传进度 二.显示所有文件总的上传进度 三.显示所有上传文件的总大小 四.上传前可

asp.net 简便无刷新文件上传系统

asp.net 简便无刷新文件上传系统 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简便无刷新文件上传系统</title> <s

ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo

 以前的一个上传文字教程,有很多朋友反映只能在本地上传文件,传到服务器端后,上传不了,这次的Demo完全解决了上次的问题. ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo 下面视频 如果你看不太清楚,请点击播放器的全屏按钮进行观看!     视频课件+源码Demo下载地址: ASP.NET与JQUERY的AJAX文件上传.rar

ASP.NET MVC中使用uploadify上传文件

课程设计需要实现上传文件模块,本来ASP.NET是有内置的控件,但是ASP.NET MVC没有,所以就有两种方 法:自定义和采用第三方插件.由于时间的关系,故采用第三方插件:uploadify. uploadify的使用必 须下载相应的文件,下载地址:http://www.uploadify.com/download/. 先是视 图: <asp:Content ID="Content3" ContentPlaceHolderID="head" runat=&q

asp.net母版使用和文件上传的问题

问题描述 在一个普通页面中用uploadify插件写了一个文件上传的功能,而且是可行的,但是我将这部分代码嫁接到一个使用母版的页面里面的时候就不工作了.需要的script和css等文件已经在head的contentplaceholder里面引入了,而且从样式上显示应该是引入了,但是为什么点击上传按钮就是不执行呢?<%@PageTitle=""Language="C#"MasterPageFile="~/Master/ModelMaster.maste

asp.net 简便无刷新文件上传系统_实用技巧

ps:flash实现的效果是好得多,但这不是我研究的范围,也没什么可比性. 兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0 效果预览 文件上传 选择文件 重命名 操作 状态 重置 选择文件 重置 选择文件 重置 选择文件 ps:由于需要后台,要测试系统请下载实例测试. ps2:在完整实例文件中,还有一个文件属性查看实例. 程序说明 [upload] 程序中最重要的方法就是upload了,调用它就可以进行无刷新上传.