How to use plupload - 7 common examples

To help you get started, we’ve selected a few plupload examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github chenkanqin / evue / src / packages / form / packages / upload / upMixins.js View on Github external
FilesAdded: (up, files) => {
            //新增图片
            if (option.upMaxLength && files.length > option.upMaxLength) {
              plupload.each(files, (file) => {
                this.evueUploader.removeFile(file);
              });
              this.evueUploader.refresh();
              console.error('只能上传数量为:' + option.upMaxLength);

              this.$emit('upload-filesAdded', {
                code: -1,
                // allFiles: this.allFiles,
                msg: '只能上传数量为:' + option.upMaxLength,
                // uploader: this.evueUploader,
              });
              return;
            }
            this.allFiles = [];
            this.upIndex = 0;
            let num = 0;
github chenkanqin / evue / src / packages / form / packages / upload / upMixins.js View on Github external
previewImage(file, callback) {//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
      if (!file || !/image\//.test(file.type)) return; //确保文件是图片

      if (file.type === 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
        let fr = new plupload.mOxie.FileReader();
//        console.log(fr);
        fr.onload = function () {
          callback(fr.result);
          fr.destroy();
          fr = null;
        };
        fr.readAsDataURL(file.getSource());
      } else {
        let preloader = new plupload.mOxie.Image();
        preloader.onload = function () {
          preloader.downsize(300, 300);//先压缩一下要预览的图片,宽300,高300
          let imgsrc = preloader.type === 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
          callback && callback(imgsrc); //callback传入的参数为预览图片的url
          preloader.destroy();
          preloader = null;
        };
github chenkanqin / evue / src / packages / form / packages / upload / upMixins.js View on Github external
}
      };
      /**是否需要拖动上传*/
      if (option.isDrop) {
        config['drop_element'] = this.browseButton;
      }
      /**
       * 配置上传类型
       * array
       * [{title: "Image files",extensions: 'gif,jpeg,jpg,png,bmp'}]
       * */
      if (option.mimeTypes) {
        config.filters['mime_types'] = option.mimeTypes;
      }

      this.evueUploader = new plupload.Uploader(config);
      this.evueUploader.init();
      this.$emit('evueUploader', this.evueUploader)
    },
    startUp() {
github nothing628 / ai-cms / resources / assets / js / component / Dropzone / Dropzone.vue View on Github external
mounted() {
			bus.$on('start-upload', this.StartUpload);

			if (!this.isAdvancedUpload()) {
				console.log('Your browser doesn\'t support dropzone upload');
				return;
			}

			var tmpContainer = document.getElementById(this.dataName + 'container_');
			var tmpBrowse = document.getElementById(this.dataName + 'button_');

			this.uploader = new plupload.Uploader({
				runtimes: 'html5,html4',
				browse_button: tmpBrowse,
				container: tmpContainer,
				url: this.dataUpload,
				chunk_size: this.dataChunkSize,
				http_method: 'POST',
				//max_retries: 3,
				//multipart: true,
				multipart_params: this.dataOptions,
				//send_chunk_number: true,
				//send_file_name: true,
				headers: {
					'X-CSRF-TOKEN': Laravel.csrfToken,
					'Authorization': Laravel.apiToken
				},
				//required_features: 'chunks',
github gaoyuyue / MyUploader / src / components / Uploader.vue View on Github external
if (this.filters != null) {
          prop["filters"] = this.filters;
        }
        if (this.multipart_params != null) {
          prop["multipart_params"] = this.multipart_params;
        }
        if (this.resize != null) {
          prop["resize"] = this.resize;
        }
        if (this.drop_element != null) {
          prop["drop_element"] = this.drop_element;
        }
        if (this.required_features != null) {
          prop["required_features"] = this.required_features;
        }
        let uploader = new plupload.Uploader(prop);
        uploader.init();
        this.up = uploader;
      }
    },
github phpdish / phpdish / assets / modules / upload-file.js View on Github external
constructor(selectorId, options){

        this.selectorId = selectorId;
        this.options = $.extend({
            headers: {

            },
            onUploaded: (response, file) => {
            },
            onError: (error) => {
                Util.dialog.message(error.code + ": " + error.message + '; ' + Translator.trans('upload.try_again_after_refresh'))
            }
        }, options);

        this.uploader = new plupload.Uploader({
            runtimes : 'html5,flash,silverlight,html4',
            browse_button : selectorId,
            url : Util.route.getRoutePath('upload'),
            file_data_name: 'file',
            filters : {
                max_file_size : '2mb',
                mime_types: [
                    {title : Translator.trans('upload.try_again_after_refresh'), extensions : "jpg,gif,png"}
                ]
            },
            headers: this.options.headers,
            init: {
                FilesAdded: function(uploader) {
                    uploader.start();
                },
                FileUploaded: (uploader, file, result) => {
github nothing628 / ai-cms / resources / assets / js / component / Manga / Page / Page-Upload.vue View on Github external
mounted() { 
			var tmpContainer = document.getElementById(this.dataName + '_container_');
			var tmpBrowse = document.getElementById(this.dataName + '_button_');

			this.uploader = new plupload.Uploader({
				runtimes: 'html5,html4',
				browse_button: tmpBrowse,
				container: tmpContainer,
				url: this.dataUpload,
				chunk_size: this.dataChunkSize,
				http_method: 'POST',
				multipart_params: this.dataOptions,
				headers: {
					'X-CSRF-TOKEN': Laravel.csrfToken,
					'Authorization': Laravel.apiToken
				},
				file_data_name: this.dataName,
				filters: {
					max_file_size: this.dataMaxSize,
					mime_types: [
						{

plupload

Plupload is a JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and F

AGPL-3.0
Latest version published 3 years ago

Package Health Score

57 / 100
Full package analysis