Plugin - Plupload

时间 2019-11-12

标签 plugin plupload 繁體版

原文原文链接

Pluploadcss

引用html

<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: {}
    });

后台html5

/// <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.htmljquery

------------------------------ 一个图片上传器的集成 --------------------------------数组

<!-- 用于打开上传框的按钮, 能够设置在页面任何地方, 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");
    }