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

    图片上传结果演示 

  • 相关阅读:
    Building a flexiable renderer
    Indirect Illumination in mental ray
    我的心情
    Cellular Automata
    Subsurface Scattering in mental ray
    Shader Types in mental ray
    BSP Traversal
    我的渲染器终于达到了MR的速度
    How to handle displacement and motion blur
    说明
  • 原文地址:https://www.cnblogs.com/Areas/p/5026019.html
Copyright © 2011-2022 走看看