• Plupload插件使用整理


    Plupload

    参考:

    http://www.cnblogs.com/2050/p/3913184.html

    http://www.plupload.com/docs/

    js:

        //上传,配置基本参数,事件,实例化
        function initPlupload() {
          //配置上传
          vm.uploader = new plupload.Uploader({
            runtimes: 'html5,flash',
            browse_button: 'uploadify',
            container: document.getElementById('container'),
            url: '/om/V1/console/file/uploadPlatformHelpBook',
            flash_swf_url: '../bower_components/plupload-2.3.1/js/Moxie.swf',
            silverlight_xap_url: '../bower_components/plupload-2.3.1/js/Moxie.xap',
            headers: {
              'Referer': '/bm/'
            }
          });
          //初始化Plupload实例
          vm.uploader.init();
          //绑定文件添加到队列事件
          vm.uploader.bind('FilesAdded', function(up, files) {
            //删除上传队列中其他文件,只保留最近上传的文件
            var len = vm.uploader.files.length;
            vm.uploader.splice(0, len-1);
            plupload.each(vm.uploader.files, function(file) {
              $scope.$apply(function () {
                vm.upload_error = false;
                vm.fileUploadObj.fileId = file.id;
                vm.fileUploadObj.fileSize = file.size;
                vm.fileUploadObj.fileName = file.name;
                var filePath = file.name;
                vm.fileUploadObj.fileType = filePath.substring(filePath.lastIndexOf("."), filePath.length).toLowerCase();
              })
            })
          });
          //绑定文件上传完成事件
          vm.uploader.bind('FileUploaded', function(up, file, responseObject) {
            var data = $.parseJSON(responseObject.response);
            if (data.status === 'SUCCESS') {
              vm.uploadEvent.uploadFileSuccess && vm.uploadEvent.uploadFileSuccess(data.result);
            } else {
              vm.uploadEvent.uploadFailed && vm.uploadEvent.uploadFailed(data.message);
            }
          });
        }

    html:

        <span class="upload  fileinput-button" id= "container" ng-show="vm.insertSymbol == true">
          <a id="uploadify">浏览文件...</a>
        </span>
  • 相关阅读:
    P3381 【模板】最小费用最大流
    Android Studio安装插件提示was not installed: Cannot download的解决
    webpack 引用vconsole
    vue ...mapMutations 的第一个参数默认为 数据对象state
    vue 如何实现在函数中触发路由跳转
    axios 使用
    rem 的使用
    vscode 习惯配置
    修改默认的inout输入框背景颜色
    vue -本地服务配置
  • 原文地址:https://www.cnblogs.com/wfeicherish/p/6560836.html
Copyright © 2020-2023  润新知