理清fineuploader无刷新上传的一些事

浏览数：60 / 时间：2015年06月09日

1.fineuploader是一款不依赖与jquery的异步无刷新上传组件，fineuploader采用ajax方式实现对文件上传，返回值都是以json的格式，对后台服务器操作和前端dom对象一些操作代码集中在javascript脚本中，这样集成使fineuploader使用非常简单，使用的时候只需要添加（fineuploader-3.5.0.css）与（jquery.fineuploader-3.9.1.js）即可实现上传。

2.fineuploader也有自身的一些特点：1.支持文件上传进度显示，2.文件拖拽浏览器上传方式、3.Ajax页面无刷新、4.多文件同时上传、5.跨浏览器、6.夸后台服务器端语言

3.供上实例demo来讲解fineuploader

$(function () {
        //定义容器
        var container = $("#uploadContainer");
        var uploader = $(‘.uploadContainer-button‘, container).fineUploader({
            request: {
                endpoint: url,
                accessKey: "AKIAJB6BSMFWTAXC5M2Q"
            },
            //是否选中后自动上传
            autoUpload: false,
   //验证操作包含文件格式、大小
            validation: {
       //控制上传文件的后缀格式数组
                allowedExtensions: [‘jpeg‘, ‘jpg‘, ‘png‘, ‘xls‘, ‘xlsx‘, ‘pdf‘, ‘txt‘, ‘doc‘, ‘docx‘, ‘rar‘, ‘zip‘],
    //控制上传文件大小
                sizeLimit: 100 * (1024 * 1024) // 200 kB = 200 * 1024 bytes
            },
   //是否支持多文件同时上传
            multiple: true,
   //上传按钮文本
            text: {
                uploadButton: ‘上传‘
            },
   //上传按钮模板
   template:‘‘
   //responseJSON 用来在上传操作完成后返回的json格式的数据
   //fileName 上传文件的文件名
   //Id 表示第几个开始上传的文件 默认从0开始计数
        }).on(‘complete‘, function (event, id, fileName, responseJson) {
            alert(responseJson.success);
            }
        });
    });

后端接收代码：.Net实现

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Web.Script.Serialization;

namespace WebApplication2
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>

    public class Msg
    {
        public bool success { get; set; }
    }
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {

            context.Response.ContentType = "text/plain";
            string fileName = context.Request["qqfile"];

            using (var inputStream = context.Request.InputStream)
            {
                using (var flieStream = new FileStream(@"c:\temp\" + fileName, FileMode.Create))
                {
                    inputStream.CopyTo(flieStream);
                }
            }

            context.Response.Write(new JavaScriptSerializer().Serialize(new Msg() { success=true}));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

View Code

Web.Config配置：

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <httpRuntime maxRequestLength = "999999999" useFullyQualifiedRedirectUrl="true"/>
  </system.web>
</configuration>

fineUploader:

manualuploader = new qq.FineUploader({
    element: document.getElementById("manual-fine-uploader"),
    request: {
        endpoint: ‘server/success.html‘
    },
    template: "qq-template-manual-noedit",
    autoUpload: false,
    debug: true,
    demoMode: true // Undocumented -> Only for the gh-pages demo website
});

qq(document.getElementById("triggerUpload")).attach("click", function() {
    manualuploader.uploadStoredFiles();
});