Question

  var myDropzone = new Dropzone("#product-image-drpzone", {
        // Prevents Dropzone from uploading dropped files immediately
        autoProcessQueue: false,
        addRemoveLinks: true,
        autoQueue: false,
        acceptedFiles: '.jpg,.png,.jpeg,.gif',
        url: 'https://api.cloudinary.com/v1_1/something/image/upload', //put it in the main url file once done
        maxfilesexceeded: function (file) {
            ToasterWrapper.errorMessage('You have uploaded more than 4 images!', false);
            return;
        },
        init: function () {
            // You might want to show the submit button only when
            // files are dropped here:
            myDropzone = this;
            var imagesArr = [];
            cloudinary.config({
                cloud_name: '',
                api_key: '737587394822762',
                api_secret: ''
            });

            this.processQueue();

            this.on("addedfile", function (file) {
                var myDropzone = this;
                $(".dz-progress").remove();

                console.log(file);
                cloudinary.uploader.upload(file, function (result) {
                    console.log(result)
                    imagesArr.push(result.public_id);
                },
                    { use_filename: true });
                $('#btn-remove').click(function () {
                    myDropzone.removeAllFiles();
                });
            });

            this.on("sending", function (file, xhr, data) {
                console.log(file.path);
            });

        }
    });

this.on('sending')没有被调用，因为我想找到要上传到cloudinary的file.path。

请帮忙

Answer 1

您正在使用cloudinary js库上传文件和dropzone.js方法来监听活动。

cloudinary.uploader.upload(file, function (result) {
     console.log(result)
     imagesArr.push(result.public_id);
}

此上传功能不会将任何事件注册到dropzone.js，因此您无法收听sending, success, complete等事件。基本上您正在混合2个库。因此，如果您想使用dropzone并听取它提供的事件，请单独使用它。以下是使用dropzone向cloudinary -

上传的方法

var myDropzone = new Dropzone(document.getElementById('dropzone-area'), {
    uploadMultiple: false,
    acceptedFiles:'.jpg,.png,.jpeg,.gif',
    parallelUploads: 6,
    url: 'https://api.cloudinary.com/v1_1/cloud9/image/upload'
 });
 myDropzone.on('sending', function (file, xhr, formData) {
       alert("you added a file");
  });
 myDropzone.on('sending', function (file, xhr, formData) {
   console.log("Adding api key "+123456789123456);
   formData.append('api_key', 123456789123456);
   formData.append('timestamp', Date.now() / 1000 | 0);
   formData.append('upload_preset', 'presetname');
 });
 myDropzone.on('success', function (file, response) {
  console.log('Success! uploading file to Cloudinary. public id - '+response.public_id );
 });

如果您想要实时示例https://plnkr.co/edit/Bm5x8jhBQNZkpz26oViw?p=preview

Answer 2

我的猜测是因为this.processQueue();设置为false，然后为了上传文件，您应该在将文件添加到dropzone后调用upload。据我所知，只有init: function () { // You might want to show the submit button only when // files are dropped here: myDropzone = this; var imagesArr = []; cloudinary.config({ cloud_name: '', api_key: '737587394822762', api_secret: '' }); /// this.processQueue(); // remove this from here var myDropzone = this; //add start uploading button to the u.i and hook for clicks on it $('#btn-start').click(function () { myDropzone.processQueue(); // only then start to upload }); //this can be hooked without the need for waiting for the added file event $('#btn-remove').click(function () { myDropzone.removeAllFiles(); }); this.on("addedfile", function (file) { var myDropzone = this; $(".dz-progress").remove(); console.log(file); cloudinary.uploader.upload(file, function (result) { console.log(result) imagesArr.push(result.public_id); }, { use_filename: true }); }); this.on("sending", function (file, xhr, data) { console.log(file.path); }); }开始。

因此快速修复您的代码（仅限init函数）

Fatal error: Class 'Model' not found in C:\xampp\htdocs\ci\application\models\diploma_model.php on line 2

如何将文件从dropzone上传到cloudinary

2 个答案: