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

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;

            }

        }

    }

}

Web.Config配置：

<configuration>

  <system.web>

    <compilation debug="true" targetFramework="4.0" />

    <httpRuntime maxRequestLength = "" 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();

});

巴特西

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

最新文章

热门文章