Question

我正在尝试在项目中使用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
 }

我需要做的是更改此配置中的网址，然后调用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();

然而，这并不像我想要的那样。

关于如何实现这一目标的任何想法？

Answer 1

在这里为后代捕捉这个。

在当前的jQuery-upload rev中，覆盖add（evt，data）函数并设置数据对象的url属性：

fileupload({
   add: function(e, data) {
      data.url = 'customURL'
      ...
   },
   ...
}

Answer 2

当我想通过将autoupload设置为true并绑定fileuploadstart回调来将文件上传到具有不同ID参数的网址时，我已经完成了此操作：

<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();

        });
    });

Answer 3

您需要添加 .bind（＆＃39; fileuploadsubmit＆＃39;）部分。见下面的例子：

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());
    });
}

Answer 4

您需要绑定 fileuploadadd 事件。

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

$('#fileupload').fileupload({
    // Other options here
}).bind('fileuploadadd', function (e, data) {
    data.url = $('input[name="dynamicURL"]').val();
});

Answer 5

以下是如何执行此操作的一般示例：

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

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

Answer 6

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

var that = $（this）.data（'fileupload'）;

应该替换为

var that = $（this）.data（'blueimpFileupload'）;

Answer 7

添加到davbryn的答案：

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

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

Answer 8

这应该这样做（类似于@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

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

Answer 9

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

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

$('#pictureUpload').fileupload({
...
});

Answer 10

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

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

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

过去两天一直在寻找这个，但最后自己解决这个问题感觉很好。乙 - ）

HTML

<input id="file_upload" name="file_upload" type="file" />

jerry1
jerry3
jerry2

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
});




});

jQuery文件上传：如何动态更改上传URL

10 个答案: