注入裁剪文件作爲輸入：文件值

我正在使用jQuery Croppie lib裁剪用戶上傳的文件。當用戶上傳文件時，我打開用戶可以裁剪圖像的模式。之後，我想將這個裁剪後的圖像設置爲文件輸入值，以便用戶可以提交表單，然後當一切準備就緒時，但我不知道如何將裁剪後的圖像設置爲輸入值。注入裁剪文件作爲輸入：文件值

這是我的代碼。

$scope.openCropModal = function(files) { 
      if (!(files[0] instanceof Object) || (fileUploadMaxSize * 1100000) < files[0].size) { 
       Alertify.alert('File size must be less than ' + fileUploadMaxSize + 'mb'); 

       return false; 
      } 
      $('#cropLogoModal').modal({}); 

      var $uploadCrop = $('#cropperMainContainer').croppie({ 
       viewport: { 
        width: 200, 
        height: 200, 
        type: 'square' 
       }, 
       boundary: { 
        width: 300, 
        height: 300 
       }, 
       enableExif: true, 
       enableOrientation: true, 
       orientation: 4, 
      }); 

      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $uploadCrop.croppie('bind', { 
        url: e.target.result 
       }).then(function() { 

       }); 

      }; 

      reader.readAsDataURL(files[0]); 

      $('#ready').on('click', function() { 
       $uploadCrop.croppie('result', 'blob').then(function(blob) { 

       }); 
      }); 

      $('.vanilla-rotate').on('click', function() { 
       $uploadCrop.croppie('rotate', parseInt($(this).data('deg'))); 
      }); 
     }

來源

2017-04-18 Aram810

您是如何發送此表單的？通過ajax或默認的HTML操作？ – Kaiido

默認的HTML表單提交 – Aram810

太糟糕了...然後hackerish dataURI空字段是你唯一的方法...對於未來可以通過ajax發送的讀者，創建一個FormData對象並在其中附加你的blob版本的畫布，所以它作爲多部分應該是任何二進制數據上傳。 – Kaiido

不是將它作爲文件附件，而是爲bas64編碼的blob數據創建隱藏字段。

 var reader = new FileReader(); 

     reader.onload = function (e) { 
      $uploadCrop.croppie('bind', { 
       url: e.target.result 
      }).then(function(blob) { 
       $('#hiddenContent').val(btoa(blob)); 
      }); 
     };

而且在服務器端時，讀取這個base64編碼圖像內容並將其放到新文件中。

警告代碼未經測試。

來源

2017-04-18 07:26:20 Justinas

如果表單是通過ajax發送的，這個解決方案真的很難看！ – Kaiido

@Kaiido是的，因爲你已經有FileReader對象，你可以和FormData一起使用，但是OP使用**默認的HTML表單提交** – Justinas

第一部分的哼聲：OP使用FileReader將它的文件傳遞給作品lib（順便說一句，我不知道它不直接接受一個Blob，或至少一個blobURI），但該庫似乎返回一個Blob，所以是的FormData肯定是最好的選擇。而且OP沒有清楚使用默認的HTML表單提交，我可能在原文中錯過了它。 – Kaiido

注入裁剪文件作爲輸入：文件值

回答

相關問題