Plugin - Plupload

Plupload

引用

<link href="~/Plupload/jquery.plupload.queue.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Plupload/plupload.full.min.js"></script>
<script src="~/Plupload/jquery.plupload.queue.min.js"></script>

前端

<div id="html5_uploader" >Error.</div>

$("#html5_uploader").pluploadQueue({
        //用來指定上傳方式，指定多個上傳方式請使用逗號隔開。
        runtimes: 'html5',
        //觸發文件選擇對話框的DOM元素
        browse_button: 'btn-headup',
        //服務器端接收和處理上傳文件的腳本地址 
        url: "/Files/Uploader",
        //當值爲true時會爲每一個上傳的文件生成一個惟一的文件名
        unique_names: true,
        //是否能夠在文件瀏覽對話框中選擇多個文件
        multi_selection: true,
        //分片上傳文件時，每片文件被切割成的大小 當該值爲0時表示不使用分片上傳功能
        chunk_size: "1mb",
        //可使用該參數來限制上傳文件的類型，大小等
        filters: {
            //用來限定上傳文件的類型，爲一個數組
            mime_types: [ { title : "Image files", extensions : "jpg,gif,png" }],
            //用來限定上傳文件的大小
            max_file_size:'400kb',
            //是否限制選取重複的文件, true 爲不容許
            prevent_duplicates: true
        },
        //當發生plupload.HTTP_ERROR錯誤時的重試次數，爲0時表示不重試
        max_retries: 0,
        // 可使用該參數對將要上傳的圖片進行壓縮
        resize: {
            width: 100,
            height: 100,
            //是否裁剪圖片
            crop: true,
            //壓縮後圖片的質量
            quality: 60,
            //壓縮後是否保留圖片的元數據
            preserve_headers: false
        },
        //指定了使用拖拽方式來選擇上傳文件時的拖拽區域
        drop_element: "",
        //當Plupload初始化完成後觸發
        init: {
            // 每一個文件上傳完畢後引起的事件
            //uploader 爲當前的plupload實例對象
            //file 爲觸發此事件的文件對象
            //responseObject 爲服務器返回的信息對象
            FileUploaded: function (uploader,file,responseObject) {
                //response：服務器返回的文本
                responseObject.response;
                //responseHeaders：服務器返回的頭信息
                responseObject.responseHeaders;
                //status：服務器返回的http狀態碼，好比200
                responseObject.status;
            },
            //當使用文件小片上傳功能時，每個小片上傳完成後觸發
            //uploader 爲當前的plupload實例對象
            //file 爲觸發此事件的文件對象
            //responseObject 爲服務器返回的信息對象
            ChunkUploaded: function(uploader,file,responseObject){
                //offset：該文件小片在總體文件中的偏移量
                responseObject.offset;
                //response：服務器返回的文本
                responseObject.response;
                //responseHeaders：服務器返回的頭信息
                responseObject.responseHeaders;
                //status：服務器返回的http狀態碼，好比200
                responseObject.status;
                //total：該文件(指的是被切割成了許多文件小片的那個文件)的總大小，單位爲字節
                responseObject.total;
            },
            //全部文件上傳完畢後引起的事件, 
            //uploader 爲當前的plupload實例對象
            //files 爲一個數組，裏面的元素爲本次已完成上傳的全部文件對象
            UploadComplete: function (uploader, files) {
                $(".plupload_upload_status").hide();
                //繼續顯示文件上傳按鈕
                $(".plupload_buttons").show();
                // 使文件上傳的按鈕有效
                uploader.disableBrowse(false);
            },
            //當發生錯誤時觸發
            Error: function(uploader,errObject){
                //錯誤代碼，具體請參考plupload上定義的表示錯誤代碼的常量屬性
                errObject.code;
                //與該錯誤相關的文件對象
                errObject.file;
                //錯誤信息
                errObject.message;
            },
            //當調用destroy方法時觸發
            Destroy: function(uploader){

            }
        },
        //當Init事件發生後觸發
        PostInit: {}
    });

 

 

後臺

/// <summary>
/// 文件上傳的後臺方法
/// 可在後面加自定義參數集
/// </summary>
/// <param name="chunk"></param>
/// <returns></returns>
[HttpPost]
public ActionResult UploadFile(int? chunk, string name)
{
    var fileUpload = Request.Files[0];

    return Content("返回的內容自定義，如文件的url相對路徑，客服端抓取方法：FileUploaded的info.response", "text/plain");
}

 

其餘要點參考地址: http://www.cnblogs.com/2050/p/3913184.html

 

 

 

 

 

------------------------------ 一個圖片上傳器的集成 --------------------------------

<!-- 用於打開上傳框的按鈕, 能夠設置在頁面任何地方, id 不能重複 -->
<button id="pup-btn1" type="button">上傳入駐聯繫圖片</button>
<!-- 圖片上傳器的總容器 -->
<div class="pup-uploader">
    <!-- 用於實例化爲文件上傳器的 div 容器, plup-btn 指的是但願點擊哪一個按鈕來打開此實例 -->
    <div class="pup-main" plup-btn="pup-btn1" hidden></div>
    <!-- 上傳完圖片後將圖片顯示在此容器中 -->
    <div class="pup-image-box"></div>
    <!-- 上傳完圖片後 將圖片的地址存儲在此表單中, 用於提交 -->
    <input required class="pup-input" type="hidden" value="@Model.入駐聯繫圖片File" name="入駐聯繫圖片File"/>
</div>

/* *********************************
 @ 做者 : LakNeumann
 @ 最後修改時間: 2017-04-11
 @ 版本: 1.0
 ********************************* */

/* 
* 生成圖片容器
* @param {string} path 圖片所在的路徑, 用於預覽和生成到 input 上
*/
var _html = (path) =>
    "<div class='pup-image'>" +
        "<img src=" + path + ">" +
        "<div class='pup-remove k-icon k-i-delete'></div>" +
    "</div>";

$(function () {
    // 根據 input 的初始值來初始化 image-box
    $(".pup-input").each(function (index, ele) {
        var _i = $(this);
        var imgs = _i.val();
        // 若是 input 中有值
        if (imgs.length > 0) {
            // 多個 url 分隔符
            var ar = imgs.split("|");
            var _b = _i.siblings('.pup-image-box');
            // 防止 imagebox 變更引起 DOMSubtreeModified 事件
            // 利用變量先保存值, 而後一次性替換
            var _c = "";
            $.each(ar, function (index, value) {
                _c += _html(value);
            });
            // 一次性替換
            _b.append(_c);
        }
    })

    // 綁定圖片移除按鈕事件
    $(".pup-image-box").on("click", ".pup-remove", function () {
        var _o = $(this).parent();
        _o.remove();
    })

    // 圖片大容器中內容發生變更(添加圖片或刪除)事件
    // 將大容器中的全部圖片路徑, 生成到綁定的 input 中
    $(".pup-image-box").on('DOMSubtreeModified', function (e) {
        // pup-image-box 對象
        var $_that = $(this);
        // 找到綁定的 input
        var _i = $_that.siblings(".pup-input");
        var _content = ""
        // 獲取容器中全部圖片
        $_that.find('img').each(function (index, element) {
            // 多圖之間用 | 號來分割
            _content += (index == 0 ? "" : "|") + $(this).attr("src");
        });
        // 圖片路徑組生成到 input 中
        _i.val(_content).change();
    });
})

/*
* 初始化全部圖片上傳控件
*/
function initAllUploader() {
    $(".pup-main").each(function (index, element) {
        var obj = $(this);
        // 上傳圖片的按鈕
        var _b = obj.attr("plup-btn");
        // 是否多圖上傳
        var _m = obj.attr('plup-mutil') != undefined;
        // 實例化
        initUploader(obj, _b, _m);
    })
}

/*
* 將標籤實例化爲一個圖片的上傳器
* @param {object} 要實例化的dom對象
* @param {string} 打開文件上傳窗口的按鈕的Id
* @param {mutil}  是不是多圖上傳
*/
function initUploader(obj, btn, mutil) {
    obj.pluploadQueue({
        runtimes: 'html5',
        browse_button: btn,
        url: "/File/Uploader",
        // 惟一名命名
        unique_names: true,
        // 是否多圖上傳
        multi_selection: mutil,
        chunk_size: "1mb",
        filters: {
            mime_types: [{ title: "Image files", extensions: "jpg,gif,png" }],
            // 是否限制上傳重複圖片
            prevent_duplicates: false
        },
        // 最大重試次數
        max_retries: 0,
        init: {
            FilesAdded: function (uploader, files) {
                // 一加入文件就自動上傳
                uploader.start();
            },
            FileUploaded: function (uploader, file, responseObject) {
                // 獲取響應對象
                response = jQuery.parseJSON(responseObject.response);
                // 文件地址
                var _p = response.path;
                // image 大容器
                var _b = obj.parent().find('.pup-image-box');
                // 根據路徑生成 圖片
                var _c = _html(_p);
                // 若是是單圖上傳, 則使用替換
                // 若是是多圖上傳, 則附加在圖片容器後面
                mutil ? _b.append(_c) : _b.html(_c);
            },
            UploadComplete: function (uploader, files) {
                $(".plupload_upload_status").hide();
                $(".plupload_buttons").show();
                // 圖片傳送完成 能夠繼續上傳其餘圖片
                uploader.disableBrowse(false);
            },
            Error: function (uploader, errObject) {
            },
        },
    });
}

 

 

    var uploadPath = ServerHelper.GetWenzhangTitleImgPath();
    chunk = chunk ?? 0;

    using (var fs = new FileStream(Path.Combine(uploadPath, name), chunk == 0 ? FileMode.Create : FileMode.Append))
    {
        var buffer = new byte[fileUpload.InputStream.Length];
        fileUpload.InputStream.Read(buffer, 0, buffer.Length);
        fs.Write(buffer, 0, buffer.Length);
    }
    using (var db = new P2PDBContext())
    {
        var imgurl = db.WebInfos.FirstOrDefault().ServerImgUrl;
        return Content(imgurl + ServerHelper.GetWenzhangTitleImgWebLink(name), "text/plain");
    }