Plupload插件使用整理

Posted 2020-09-05 进击的程序媛

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>