Question

我正在使用bootstrap模式创建上传图像的分步指南。

步骤包括：

上传图片按钮
打开上传图片模式
从本地资源中选择图像文件。
在单独的croppic模式中加载图像

我的问题是。如何将步骤2输入中的图像文件传递给步骤4中的loadPicture参数。

这是我目前的代码：

$(document).on('change', '.btn-file :file', function() {

    var input       =   $(this);
    var numFiles    =   input.get(0).files ? input.get(0).files.length : 1;
    var label       =   input.val().replace(/\\/g, '/').replace(/.*\//, '');
                        loadImageFromInput(this,'image-uploaded');
                        input.trigger('fileselect', [numFiles, label]);

    var log = numFiles > 1 ? numFiles + ' files selected' : label;

    if(log){
        var picture = $('#image-uploaded').attr('src');

        if(picture == ''){
            picture = 'tests/images/croppic/assets/img/night.jpg';
        }

        var croppicHeaderOptions2 = {
            uploadUrl:'tests/images/croppic/img_save_to_file.php',
            cropData:{
                "dummyData":1,
                "dummyData2":"asdas"
            },
            cropUrl:'tests/images/croppic/img_crop_to_file.php',
            loadPicture:picture,
            modal:false,
            processInline:true,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
        }   

        var croppic = new Croppic('croppic2', croppicHeaderOptions2);

        $('.upload-picture-modal').modal('hide');
        $('.croppic-modal').modal('show');
    }

});

Answer 1

我可能错了，但它在onAfterImgUpload中我使用了simiar：这基本上就是我用过的东西：

var imageUrl;    
var croppicHeaderOptions2 = {
                uploadUrl:'tests/images/croppic/img_save_to_file.php',
                cropData:{
                    "dummyData":1,
                    "dummyData2":"asdas"
                },
                cropUrl:'tests/images/croppic/img_crop_to_file.php',
                loadPicture:picture,
                modal:false,
                processInline:true,
                loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
     onBeforeImgUpload: function(){ 
     $('.cropImgWrapper').css('height','100%');
         //hide buttons or any elements to do with upload
     },
 onAfterImgUpload: function(){ 
     //this step here to get your image
     imageUrl = $(this)[0].imgUrl;

 },
 onBeforeImgCrop: function(){ 
     console.log('onBeforeImgCrop') ;
  },
  onAfterImgCrop:function(){
     //image has been cropped do something in here

  });

使用此功能将图像传递到您需要的地方

imageUrl = $(this)[0].imgUrl;

在上传之前将图像传递给croppic loadPicture＆amp;种植

1 个答案: