zoukankan      html  css  js  c++  java
  • [Fine Uploader] 用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 
    脚本之家Fine Uploader下载地址 http://www.jb51.net/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, 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); 





    服务器端实现改进版 
    复制代码代码如下:

    public ActionResult ProcessUpload(string qqfile) 

    using (var inputStream = Request.InputStream) 

    using (var flieStream = new FileStream(@"c: emp" + qqfile, FileMode.Create)) 

    inputStream.CopyTo(flieStream); 


    return Json(new { success = true }); 

    图片上传结果演示 

  • 相关阅读:
    我的有道难题算法-双倍超立方数
    终于获取了SharePoint.OpenDocument对象打开的Word对象
    Eclipse下的项目管理插件介绍
    初识 sqlite 与 content provider 学习笔记
    android 官方文档中的一些错误收集
    android TraceView (图形化性能测试工具)使用入门笔记
    Texttospeech 入门与进阶学习笔记(android)
    Intent进阶 和 Intentfilter 学习笔记
    android UI设计属性中英对照表(未修订)
    android学习笔记7天打造一个简易网络Mp3播放器
  • 原文地址:https://www.cnblogs.com/Areas/p/5026019.html
Copyright © 2011-2022 走看看