纯js上传控件——fineuploader

fineuploader是一款基于ajax实现文件上传的插件,具有以下有点:

 

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

 

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

 

C:Ajax页面无刷新.

 

D:多文件上传.

 

F:跨浏览器.

 

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

GitHub下载地址:https://github.com/valums/file-uploader

系在后目录结构如下

 

项目中引用fineuploader-3.3.1.css和fineuploader-3.3.1.min.js即可

上传测试页面:Demo.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Fine Uploader Demo</title>
    <link href="../../App_Common/fineuploader/fineuploader-3.3.1.css" rel="stylesheet"
        type="text/css" />
</head>
<body>
    <div id="manual-fine-uploader">    
    </div>  
    <button id="triggerUpload" onclick="Upload();" style="margin-top: 10px;">
        Upload now
    </button>
    <script type="text/javascript" src="../../App_Common/fineuploader/fineuploader-3.3.1.js" ></script>
    <script type="text/javascript" src="../../App_Common/jquery-1.4.2.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function(){     
          var  manualuploader = new qq.FineUploader({
                autoUpload :false,
                element: document.getElementById("manual-fine-uploader"),
                request: {endpoint: 'Handler.ashx'}, 
                text: {uploadButton: '选择文件'},
                validation:{allowedExtensions: ['jpeg', 'jpg', 'txt','rar','zip','doc','docx','xls','xlsx'],sizeLimit: 100*(1024*1024)},
              callbacks: {
                  onComplete: function (id, name, responseJSON) {
                       if (responseJSON.success) {                       
                            //$(".qq-upload-list").hide();
                            alert(name+"上传成功");
                        } 
                  }
              },
              deleteFile:{
               enabled: true,
               endpoint: 'Handler.ashx', 
              },
                debug: true
            });
           $("#triggerUpload").click(function(){manualuploader.uploadStoredFiles();}); 
    });   
    </script>
</body>
</html>

服务端接收:Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

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

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        if (context.Request != null && context.Request.Files.Count > 0)
        {
            HttpPostedFile file = context.Request.Files["qqfile"];//上传文件对象
            string uploadPath = context.Server.MapPath("~/UpLoad/QueOperation/");
            if (file != null)
            {
                    if (!Directory.Exists(uploadPath))
                    {
                        Directory.CreateDirectory(uploadPath);
                    }
                    string ExtName = Path.GetExtension(file.FileName);
                    string FileName = Path.GetFileNameWithoutExtension(file.FileName);
                    //string fileName = "【" + FileName + "】" + DateTime.Now.ToString("yyyyMMddHHmmss") + ExtName;
                    file.SaveAs(uploadPath + FileName + ExtName);
                    context.Response.Write("{\"success\":\"true\"}");               
            }          
        }      
    }

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

 

你可能感兴趣的:(纯js上传控件——fineuploader)