从valums fileuploader中删除拖放

时间:2012-04-17 11:42:04

标签: javascript jquery drag-and-drop

嘿伙计们,在我最近的项目中,我使用了valums文件上传器进行基于ajax的文件上传,因为我发现它最符合我的要求,但现在我卡在了一点,这就是我想要删除拖放功能我已经搜索了几个小时的互联网,但没有找到有用的。有没有办法从插件中删除此部分?这是我的代码

uploader = new qq.FileUploader({
        element:        $('#file-uploader')[0],
        action:         base_url + 'assets/scripts/server-side/server-side-uploader.php',
        debug:          true,
    });

6 个答案:

答案 0 :(得分:4)

您可以在没有拖放部分的情况下定义自己的模板,例如我有:

template: '<div class="qq-uploader">' +
                '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                '<div class="qq-upload-button">Upload Proof</div>' +
                '<ul class="qq-upload-list"></ul>' +
             '</div>',

从模板中删除以下行以禁用拖放功能

'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +

答案 1 :(得分:1)

我不同意这个问题的接受答案。如果删除行

'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +  

qq uploader提供throw new error('element not found ' + type),因此这不是肯定的解决方案 - 没有人想在页面上看到javascript错误(至少我)。

我认为最简单的方法就是用css隐藏div:只做

.qq-upload-drop-area {
    display: none;
}

这对我来说很好。没有错误,没有div块。

答案 2 :(得分:1)

var uploader = new qq.FileUploader({
....
});

qq.attach(document, 'dragenter', function(e) {
    $('.qq-upload-drop-area').hide();
});

答案 3 :(得分:0)

请改用FileUploaderBasic。 qq.FileUploader实际上扩展了FileUploaderBasic,并添加了列表支持和拖放内容。 FileUploaderBasic仅实现按钮和验证。

var uploader = new qq.FileUploaderBasic({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: '/server/upload'
});

如果你想使用FileUploaderBasic没有的其他一些功能(比如列表),只需将qq.FileUploaderBasic扩展到fileupoader.js之后引用的单独的JavaScript文件中,如下所示:

var qq = qq || {};

qq.extend(qq.FileUploaderBasic.prototype, {
 //override uploader stuff by just creating a function with the same name,
 //like this function that creates the upload button
 _createUploadButton: function(element){
    var self = this;
    //make whatever modifications you want here
    return new qq.UploadButton({
        element: element,
        multiple: this._options.multiple && qq.UploadHandlerXhr.isSupported(),
        onChange: function(input){
            self._onInputChange(input);
        }        
    });           
}
});

答案 4 :(得分:0)

这对我有用

jQuery('.qq-upload-drop-area').remove();

答案 5 :(得分:0)

只需将文字颜色设为透明

即可
.ajax__fileupload_dropzone {color:transparent;}