Valums文件上传器拖放区域更改

Valums file uploader drag drop area change

本文关键字:区域 拖放 文件 Valums      更新时间:2023-09-26

我有一个按钮和一个拖放区域。我想把valum文件上传器应用到这个按钮上。但是我想保留拖放区域作为它旁边的另一个框。我如何实现它?我目前的实现如下:

         that.imageUploader = new qq.FileUploaderBasic({
                button: $('#sprPictureUpload')[0],
                action: '/ui/rest/utils/upload/image/file',
                allowedExtensions:SUPPORTED_IMAGE_TYPES,
                forceMultipart: true,
                multiple: config.multiple,
                inputName: 'photoFile',
                onSubmit: function(id, fileName) {
                    renderImagePlaceHolders.call(that, id, fileName);
                },
            });

html看起来像这样:

<section class="upload-section" data-section="upload">
    <div class="upload-area">
        <div style="">
            <h3 style="color:#aaa">
                Drag images here
            </h3>
            <h5 style="color:#aaa"> or if you prefer ...</h5>
            <a id="sprGenericPictureUpload" class="btn btn-primary">
                <i class="icon-upload icon-white"></i> Choose image to Upload 
            </a>
        </div>
    </div>
</section>

所以我想要的是点击#sprPictureUpload,并在.upload-area部分的任何地方拖动,应该会启动照片上传。也有一种方法应用上传器到两个不同的元素与相同的配置?

我建议不要使用FineUploaderBasic,而是使用FineUploader模式。FineUploader模式提供了拖放功能。

FineUploader Mode文档在这里:

http://docs.fineuploader.com/integrating/modes/fineuploader.html