24

我正在尝试在我的项目中使用 blueimp jQuery File Upload 。它非常适合我的需求，但我需要在创建和配置插件后更改 url 文件动态上传。我做了很多调查，但不幸的是，没有发现任何有用的东西。一般来说，我有一个按钮来选择文件和覆盖实际上传的文件上传操作。基本创建如下所示：

 $('[upload-button]').fileupload(new FileUploadConfig())

和配置本身：

 function FileUploadConfig() {

     // is set to a unique value for each file upload
     this.url = 'temporary';
     this.fileInput = $('[upload-button]');

     //... some other code
 }

我需要做的是更改此配置中的 url，然后调用data.submit(). 我发现，这个配置是使用保存的，$.data()并试图用这样的代码解决问题

// get the current fileupload configuration
var config = $.data($('[upload-button]').get(0), 'fileupload');

// change the url configuration option
config.options.url = file.link;

//send a file
data.submit();

但是，这并不像我想要的那样工作。

关于如何做到这一点的任何想法？

4

10 回答 10

29

只是在这里为后代捕获这个。

在当前 jQuery-upload rev 中，重写 add(evt,data) 函数并设置数据对象的 url 属性：

fileupload({
   add: function(e, data) {
      data.url = 'customURL'
      ...
   },
   ...
}
于 2013-10-24T01:55:29.457 回答
4

当我想通过设置和绑定回调autoupload将文件上传到具有不同 id 参数的 url 时，我已经完成了此操作：truefileuploadstart

<script type='text/javascript'>
    $(function () {
        'use strict';
        $('#fileupload').fileupload({
            url: 'originalurl/dest/1'
            autoUpload: true            
        }).bind('fileuploadadd', function (e, data) {
            var that = $(this).data('fileupload');              
            that.options.url = 'originalurl/dest/' + $("#selctedlocation").val();

        });
    });

于 2013-02-19T14:51:28.877 回答
4

您需要绑定fileuploadadd事件。

假设您将动态 url 保存在一个名为“dynamicURL”的隐藏输入中，那么您应该这样做：

$('#fileupload').fileupload({
    // Other options here
}).bind('fileuploadadd', function (e, data) {
    data.url = $('input[name="dynamicURL"]').val();
});
于 2016-02-19T16:12:19.387 回答
3

您需要添加.bind('fileuploadsubmit')部分。请参见下面的示例：

function fnFileUpload(id, urlFunc, successurl) {
    $(id).fileupload({
        url: urlFunc(),
        dataType: 'json',
        maxFileSize: 10000000,
        singleFileUploads: true,
        done: function (e, data) {
            $(this).fileupload('option', 'url', urlFunc());
            if (data.result.respType == 'S') {
                window.location.href = successurl;
            } else {
                toastr.error(data.result.respDesc, data.result.respTitle);
                var progress = 0;
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).bind('fileuploadsubmit', function (e, data) {
        $(this).fileupload('option', 'url', urlFunc());
    });
}
于 2015-10-10T12:02:40.443 回答
2

除了 davbryn 的回答：这个字符串

var that = $(this).data('fileupload');

应该换成这个

var that = $(this).data('blueimpFileupload');

于 2014-08-28T01:45:11.527 回答
1

这是一个通用示例，您可以如何执行此操作：

$('#fileupload').fileupload({
    url: initial_url,
    done: function (e, data) {
        $(this).fileupload('option', 'url', new_url);
    }
});

我使用它来根据上传脚本返回的结果更改 URL，因此我在 done 回调的开头设置了 new_url = data.result.new_url。

于 2013-12-13T14:46:19.820 回答
0

要添加到 davbryn 的答案：

我认为你绑定的事件应该在 fileuploadadd 上，因为 fileuploadstart 不会给你任何数据，它只是给你一个事件。

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

于 2013-04-18T06:48:08.863 回答
0

这应该可以做到，（类似于@Aneon 的回答）似乎对我有用：

var file = { link: "http://thenewurl" };

// I used a form element to create the fileupload widget
$('[upload-button]').fileupload("option", "url", file.link);

// Submit the form
$('[upload-button]').submit();

在此函数调用之后的任何时候提交表单都将使用新的 url

（我的代码在选择图像后立即提交，尚未测试手动提交调用）。

于 2014-01-09T01:38:32.763 回答
0

从元素中取消注册插件，然后使用新 URL 再次注册。

$('#pictureUpload, #pictureUpload *').unbind().removeData();

$('#pictureUpload').fileupload({
...
});
于 2015-09-06T14:05:25.673 回答
-1

嗨，似乎有一种更简单的方法来做到这一点。我把我的代码放在下面。uplodify 的基本版本来自这里 http://www.startutorial.com/articles/view/21

现在我所做的是从变量中获取文件夹的值。然后我每次单击下面的列表项时都会加载uploadify函数，这些列表项是根上传目录中的文件夹名称。因此，当我单击它们时，我会得到该名称并将其附加到实际文件夹路径并再次调用 uploadify。

但是如果我一次又一次地调用它，屏幕上会出现更多的浏览按钮，所以我在调用uploadify之前删除了元素#file_uploadUploader。所以我想问题已经解决了。至少对我来说 ：）

过去两天一直在寻找这个，但最终感觉很好自己解决了它。B-)

HTML

<input id="file_upload" name="file_upload" type="file" />
  • 杰瑞1
  • 杰瑞3
  • 杰瑞2

jQuery

$(document).ready(function() {

var uploadfer = 'uploads/jerry2';


$("ul li").click(function(){
uploadfer = "uploads/"+$(this).text()+"/";
alert(uploadfer);

$('#file_uploadUploader').remove();

$('#file_upload').uploadify({
'uploader'  : 'js/uploadify.swf',
'script'    : 'upload.php',
'cancelImg' : 'js/cancel.png',
'folder'    : uploadfer,
'auto'      : true
});


});

$('#file_upload').uploadify({
'uploader'  : 'js/uploadify.swf',
'script'    : 'upload.php',
'cancelImg' : 'js/cancel.png',
'folder'    : uploadfer,
'auto'      : true
});




});
于 2013-08-30T09:15:45.153 回答