FineUploader For Asp.net WebForm 圖片拖曳上傳

2018-07-20 置頂文章

1674
0
ASP.NET

FineUploader 套件使用筆記 For Asp.net WebForm

FineUploader 官方連結:https://fineuploader.com/

FineUploader 官方Demo:https://fineuploader.com/demos.html

主要建立檔案

Upload.aspx(主檔)
Upload.ashx (Handler)
Delete.ashx(Handler)

註解說明:

什麼是handler? https://docs.microsoft.com/zh-tw/previous-versions/visualstudio/visual-studio-2008/bb398986(v=vs.90)

Sample Code: Upload.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upload2.aspx.cs" Inherits="Upload2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- jQuery
    ====================================================================== -->
<%--    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>--%>
    <script src="src/fine-uploader/jquery.min.js"></script>
    <!-- Fine Uploader New/Modern CSS file
    ====================================================================== -->
<%--    <link href="client/fine-uploader-new.css" rel="stylesheet">--%>
    <link href="src/fine-uploader/fine-uploader-new.css" rel="stylesheet" />
    <!-- Fine Uploader jQuery JS file
    ====================================================================== -->
 <%--   <script src="client/jquery.fine-uploader.js"></script>--%>
    <script src="src/fine-uploader/fine-uploader.js"></script>
    <!-- Fine Uploader Thumbnails template w/ customization
    ====================================================================== -->
    <script type="text/template" id="qq-template-manual-trigger">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="拖曳至此">
            <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="buttons">
                <div class="qq-upload-button-selector qq-upload-button">
                    <div>選擇檔案</div>
                </div>
                <button type="button" id="trigger-upload" class="btn btn-primary">
                    <i class="icon-upload icon-white"></i> Upload
                </button>
            </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>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                    <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>

    <style>
        #trigger-upload {
            color: white;
            background-color: #00ABC7;
            font-size: 14px;
            padding: 7px 20px;
            background-image: none;
        }

        #fine-uploader-manual-trigger .qq-upload-button {
            margin-right: 15px;
        }

        #fine-uploader-manual-trigger .buttons {
            width: 36%;
        }

        #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
            width: 60%;
        }
    </style>

    <title>Demo</title>

</head>
<body>
  <%--  <form id="form1" runat="server">
        <div>
    
        </div>
    </form>--%>

     <!-- Fine Uploader DOM Element
    ====================================================================== -->
    <div id="fine-uploader-manual-trigger"></div>

    <!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
    ====================================================================== -->
    <script>
        var manualUploader = new qq.FineUploader({
            element: document.getElementById('fine-uploader-manual-trigger'),
            template: 'qq-template-manual-trigger',
            request: {
                endpoint: 'Upload.ashx'
            },
            deleteFile: {
                enabled: true,
                method: "POST",
                forceConfirm: true,
                params: {
                    id: document.getElementById("fine-uploader-gallery")
                },
                endpoint: 'Delete.ashx'
            },
            thumbnails: {
                placeholders: {
                    //waitingPath: '/source/placeholders/waiting-generic.png',
                    //notAvailablePath: '/source/placeholders/not_available-generic.png'
                    waitingPath: '<img src="src/fine-uploader/placeholders/waiting-generic.png" />',
                    notAvailablePath: '<img src="src/fine-uploader/placeholders/not_available-generic.png" />'
                }
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'txt'],
                itemLimit: 6,
                //sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
                sizeLimit: 1024000 // 50 kB = 50 * 1024 bytes
            },
            autoUpload: false,
            debug: true,
            callbacks: {
                onAllComplete: function () {
                    alert('done!')
                },
                onSubmitDelete: function (id) {
                    this.setDeleteFileParams({ filename: this.getName(id) }, id)
                }
            }
        });

        qq(document.getElementById("trigger-upload")).attach("click", function () {
            manualUploader.uploadStoredFiles();
        });
    </script>

</body>
</html>

Sample Code : Upload.ashx

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

using System;
using System.Web;

public class Upload : IHttpHandler {
    
    public void ProcessRequest (HttpContext context)
    {
        try 
	    {	        
		    UploadFile(context);
            context.Response.Write(@"{""success"":true}");
	    }
	    catch (Exception)
	    {
		    context.Response.Write(@"{""error"":""An Error Occured""}");
	    }
    }
    
    public void UploadFile (HttpContext context) 
    {
        HttpRequest request = context.Request;
        
        foreach (string s in context.Request.Files)
        {
            //HttpRequest request = context.Request;
            //String fileName     = request.Params["qqfilename"];
            
            var file            = context.Request.Files[s];
            //var fileName      = file.FileName;
            String fileName     = request.Params["qqfilename"];
            var fileExtension   = file.ContentType;

            if (string.IsNullOrEmpty(fileName))
            {
                // TODO: Warning!!! continue If                
                throw new System.Exception("File null or empty");
            }
            else
            {
                var pathToSave = @"C:\DRAGPICTEMP\" + fileName; // Or -> (HttpContext.Current.Server.MapPath(tempPath) + ("\" + fileName))
                file.SaveAs(pathToSave);
            }
        }
    }
    
    public bool IsReusable 
    {
        get {
            return false;
        }
    }

}

Sample Code: Delete.ashx

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

using System;
using System.Web;
using System.IO;

public class Delete : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        try
        {
            DeleteFile(context);
            context.Response.Write(@"{""success"":true}");
        }
        catch (Exception)
        {
            context.Response.Write(@"{""error"":""An Error Occured""}");
        }
    }
    
    /// <summary>
    /// 刪除檔案 
    /// </summary>
    /// <param name="context"></param>
    public void DeleteFile(HttpContext context)
    {
        HttpRequest request = context.Request;
        String fileName = request.Params["filename"];
        
        if (string.IsNullOrEmpty(fileName))
        {
            // TODO: Warning!!! continue If                
            throw new System.Exception("File null or empty");
        }
        else
        {
            //System.IO.FileInfo file = new FileInfo(Server.MapPath("~/MyFiles/" + fileName));
            FileInfo filepath = new FileInfo(@"C:\DRAGPICTEMP\" + fileName);

            if (filepath.Exists)
            {
                filepath.Delete();
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

參考來源:

套件官網

https://fineuploader.com/demos.html

官方套件demo sample

https://fineuploader.com/demos.html#basic-setup%EF%BC%9B

使用參考

https://www.cnblogs.com/joeylee/p/3876056.html

https://blog.csdn.net/jxiaoliu/article/details/40392089

server 端程式撰寫參考

https://stackoverflow.com/questions/36560252/net-handler-ashx-for-fineuploade

server 端程式撰寫參考(C#、Java)

http://blog.51cto.com/12176710/2061604