fineuploader使用实例

1、Fine Uploader特点

Fine Uploader Features:

A：支持文件上传进度显示.

B：文件拖拽浏览器上传方式

C：Ajax页面无刷新.

D：多文件上传.

F：跨浏览器.

E：跨后台服务器端语言.

2、页面前端代码

  <div id="btnUpload"></div>

        $(function () {

            $('#btnUpload').fineUploader({
                request: {
                    endpoint: 'Handler/UpLogo.ashx'
                },
                validation: {
                    allowedExtensions: ['jpeg', 'jpg', 'png']
                },
                multiple: false,
                text: {
                    uploadButton: '<div>上传头像</div>'
                }
            }).on('complete', function (event, id, fileName, responseJson) {

                if (responseJson.success) {
                    $("#absoluteUrl").val(responseJson.path);
                    $("#jcrop_target").attr("src", responseJson.url);
                    $("#jcrop_target").css({ "width": 300, "height": 300 });
                    $("#preview").attr("src", responseJson.url);
                    $("#preview").css({ "width": 100, "height": 100 });

                    ias.update();
                }
            });
        });

2、Handler文件代码

<%@ WebHandler Language="C#" Class="UpLogo" %>
using System;
using System.Web;
using System.IO;
using System.Text;
using System.Net;
using System.Data;
using System.Collections;
using System.Collections.Generic;
using System.Drawing;
using ECS.Utility;

public class UpLogo : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";


        if (context.Request != null && context.Request.Files.Count > 0)
        {
            var HttpFile = context.Request.Files[0];
            var allowedExt = new List<string> { ".jpg", ".gif", ".bmp", ".png" };
            var fileExt = Path.GetExtension(HttpFile.FileName).ToLower();
            var File_Name = Path.GetFileNameWithoutExtension(HttpFile.FileName);
            var toFileName = Guid.NewGuid().ToString() + fileExt;

            var toFileFullPath = context.Server.MapPath("~/UpFiles/UserTemFace/");
            var viewPath = "/UpFiles/UserTemFace/";
            var Title = File_Name;
            DirectoryInfo di = new DirectoryInfo(toFileFullPath);
            if (!di.Exists)
            {
                di.Create();
            }

            ECS.Model.A_User Model = new ECS.BLL.A_User().GetModel(ValUtil.GetUserID());
            if (Model != null)
            {
                //toFileName = Model.UserFaceImg;
                string saveFile = toFileFullPath + toFileName;
                //先删除临时文件
                //var _filePath = toFileFullPath + "\\" + toFileName;
                //if (File.Exists(_filePath))
                //{
                //    FileInfo fi = new FileInfo(_filePath);
                //    if (fi.Attributes.ToString().IndexOf("ReadOnly") != -1)
                //    {
                //        fi.Attributes = FileAttributes.Normal;
                //    }
                //    File.Delete(_filePath);
                //}

                HttpFile.SaveAs(saveFile);

                Model.UserFaceImg = toFileName;
                new ECS.BLL.A_User().Update(Model);
            }



            string imgeUrl = "";
            if (fileExt.ToLower().Equals(".jpg") || fileExt.ToLower().Equals(".gif") || fileExt.ToLower().Equals(".bmp") || fileExt.ToLower().Equals(".png"))
            {
                imgeUrl = viewPath + toFileName;
            }
            else
            {
                context.Response.Write("{success:false,msg:'只能上传图片类型的文件'}");
                context.Response.End();
                return;
            }
            string url = viewPath + "/" + toFileName;

            context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(new { success = true, url = url, path = toFileName }));
            context.Response.End();

        }
        else
        {
            context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(new { success = false }));
            context.Response.End();
        }


    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}