jQuery 文件上传：如何动态更改上传 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12987066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery File Upload: how to change the upload url dynamically
提问by Arthur
I'm trying to use the blueimp jQuery File Uploadin my project. It suits my needs fairly well but I need to change the url files are uploaded to dynamically after the plugin is created and configured. I've done a good deal of investigation, but, unfortunately, found nothing useful. In general, I have a button to choose files and fileupload action covering the actual upload. The basic creation looks like this:
我正在尝试在我的项目中使用 blueimp jQuery File Upload。它非常适合我的需求，但我需要更改在创建和配置插件后动态上传的 url 文件。我进行了大量调查，但不幸的是，没有发现任何有用的信息。一般来说，我有一个按钮来选择文件和覆盖实际上传的文件上传操作。基本创建如下所示：
$('[upload-button]').fileupload(new FileUploadConfig())
And configuration itself:
和配置本身：
function FileUploadConfig() {
// is set to a unique value for each file upload
this.url = 'temporary';
this.fileInput = $('[upload-button]');
//... some other code
}
The thing I need to do is change the url in this config and then call data.submit(). I've found out, that this configuration is saved using $.data()and tried to solve the problem with such 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();
However, this does not work the way I wanted.
但是，这并不像我想要的那样工作。
Any ideas on how to accomplish this?
关于如何实现这一点的任何想法？
回答by Bill
Just capturing this here for posterity.
只是在这里为后代捕捉。
In the current jQuery-upload rev, override the add(evt,data) function and set the url property of the the data object:
在当前的 jQuery-upload rev 中，覆盖 add(evt,data) 函数并设置数据对象的 url 属性：
fileupload({
add: function(e, data) {
data.url = 'customURL'
...
},
...
}
回答by davbryn
I've accomplished this when I wanted to have a file upload to a url with a different id param by setting autouploadto trueand binding the fileuploadstartcallback:
我已经做到了这一点，当我想通过设置有一个文件上传到一个不同的ID PARAM一个URLautoupload来true和有约束力的fileuploadstart回调：
<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();
});
});
回答by davbryn
You need to bindthe fileuploadaddevent.
您需要绑定的fileuploadadd事件。
Suppose you saved the dynamic url in an hidden input called "dynamicURL" then you should do this:
假设您将动态 url 保存在名为“dynamicURL”的隐藏输入中，那么您应该这样做：
$('#fileupload').fileupload({
// Other options here
}).bind('fileuploadadd', function (e, data) {
data.url = $('input[name="dynamicURL"]').val();
});
回答by akdora
You need to add .bind('fileuploadsubmit')part. See example below:
您需要添加.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());
});
}
回答by Evgeny Semionov
In addition to davbryn's answer: This string
除了 davbryn 的回答：这个字符串
var that = $(this).data('fileupload');
var that = $(this).data('fileupload');
should be replaced by this
应该换成这个
var that = $(this).data('blueimpFileupload');
var that = $(this).data('blueimpFileupload');
回答by Aneon
Here's a general example how you might do this:
以下是您可以如何执行此操作的一般示例：
$('#fileupload').fileupload({
url: initial_url,
done: function (e, data) {
$(this).fileupload('option', 'url', new_url);
}
});
I use this to change the URL based on the result returned by the upload script, so I set new_url = data.result.new_url in the beginning of the done callback.
我使用它根据上传脚本返回的结果更改 URL，因此我在 done 回调的开头设置了 new_url = data.result.new_url。
回答by jSnake04
This should do it, (similar to @Aneon's answer) seems to work for me:
这应该可以，（类似于@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();
Submitting the form at any point after this function call will use the new url
在此函数调用后的任何时候提交表单都将使用新的 url
(my code submits as soon as the image is selected, haven't tested the manual submit call).
（我的代码在选择图像后立即提交，尚未测试手动提交调用）。
回答by Martin Staufcik
Unregister the plugin from the element and then register it again with a new URL.
从元素中取消注册插件，然后使用新 URL 重新注册。
$('#pictureUpload, #pictureUpload *').unbind().removeData();
$('#pictureUpload').fileupload({
...
});
回答by Ashwin Saval
To add to davbryn's answer:
添加到 davbryn 的答案：
I think the event you're binding to should be on a fileuploadadd as fileuploadstart does not give you any data, it just gives you an event.
我认为您绑定的事件应该在 fileuploadadd 上，因为 fileuploadstart 不会给您任何数据，它只会给您一个事件。
回答by Arun Jerry
Hi there seems to be a simpler way to do it. I've put my code below. The base version of uplodify is from here http://www.startutorial.com/articles/view/21
嗨，似乎有一种更简单的方法可以做到这一点。我把我的代码放在下面。uplodify 的基本版本来自这里 http://www.startutorial.com/articles/view/21
Now what I've done is I am getting the values for folderfrom a variable. And then I load the uploadify function everytime I click the lists item below, these list items are foldernames inside the root upload directory. So when i click them i get that name and append it to the actual folder path and call the uploadify again.
现在我所做的是从变量中获取文件夹的值。然后我每次单击下面的列表项时加载uploadify 函数，这些列表项是根上传目录中的文件夹名称。因此，当我单击它们时，我会得到该名称并将其附加到实际文件夹路径并再次调用uploadify。
But then if i keep calling it again and again, there will be more browse buttons appeding on the screen so I just removed the element #file_uploadUploader before calling the uploadify. So i guess the problem is solved. at least for me :)
但是如果我一次又一次地调用它，屏幕上会出现更多的浏览按钮，所以我在调用uploadify之前删除了#file_uploadUploader元素。所以我想问题已经解决了。至少对于我来说 ：）
Been searching for this for the past two days but finally feels good to solve it myself. B-)
这两天一直在找这个问题，但终于自己解决了，感觉很好。乙-)
HTML
HTML
<input id="file_upload" name="file_upload" type="file" />
- jerry1
- jerry3
- jerry2
- 杰瑞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
});
});
