• 纯js上传控件——fineuploader


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

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

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

    C:Ajax页面无刷新.

    D:多文件上传.

    F:跨浏览器.

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

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

    现已更新地址到:https://github.com/FineUploader/fine-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封装用到qq-template模板,系统自带三个这里就用默认模板

    也可以将以下template直接方放入页面

    <!--
        This is a legacy template and is not meant to be used in new Fine Uploader integrated projects.
        Read the "Getting Started Guide" at http://docs.fineuploader.com/quickstart/01-getting-started.html
        if you are not yet familiar with Fine Uploader UI.
    -->
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
                <span class="qq-drop-processing-selector qq-drop-processing">
                    <span>Processing dropped files...</span>
                    <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
                </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
    
            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>
    
            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>
    
            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>
  • 相关阅读:
    C#递归读取GIS目录文件格式
    ArcGIS Pro 2.5离线安装方案
    ASP.NET跨域解决方法
    C# GDAL编码问题3——读取中文图层
    C# GDAL编码问题2——读取中文属性
    C# GDAL编码问题1——打开mdb中文路径
    Word标题编号变黑框
    SVN设置全局忽略样式
    DevExpress中DockPanel样式修改
    解决XML根级别上的数据无效
  • 原文地址:https://www.cnblogs.com/loyung/p/5017049.html
Copyright © 2020-2023  润新知