uploadify/uploadifive 是很棒的上传插件,有时候需要动态设置表单数据,下面就对动态设置表单做一下使用记录。
在 onAddQueueItem 事件里添加
如果是自动上传的,可在 onAddQueueItem
事件里添加一个函数设置 settings.formData
,参考如下
(去掉formData,用下面的代替)
1
2
3
'onAddQueueItem' : function(file) {
this.data('uploadifive').settings.formData = { 'someKey' : $('#formFieldID').val() };
}
手动上传
若要手动上传的,可在调用upload 前改变要引用的值,参考以下代码:
1
2
3
4
function uploadFiles() {
$('#file_upload').data('uploadifive').settings.formData = { 'someKey' : $('#formFieldID').val() };
$('#file_upload').uploadifive('upload', '*');
}
单独设置
1
2
3
'onUpload' : function(){
$('#file_upload').data('uploadifive').settings.formData = { 'additional_form_data' : $('#additional_form_data').val() }
},
手把手一步一步设置
1
<input type="text" name="student" id="student" placeholder="Your Student ID" value="" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$('#my_file').uploadifive ({
'formData': {
//Some data we already know
'timestamp' : "1400137111",
'token' : "a9b7ba70783b617e9998dc4dd82eb3c5"
},
//This will be executed before the upload process starts, so here's where
//you will get the values in your form and will add them to formData.
'onUpload': function(filesToUpload) {
//Most of jQuery plugins, and luckily this one, uses the function jQuery.data
//to save the settings we use on plugin's initialization.
//In this case we can find those settings like this:
var settings = $(this).data('uploadifive').settings;
//Now we need to edit formData and add our input's value
settings.formData.student = $('#student').val();
//formData has the value readed from the input, so we store
//it again using jQuery.data
$(this).data('uploadifive').settings = settings;
//After this the plugin will perform the upload, reading the settings with
//jQuery.data and our input's value will be present
},
});
妙
1
$("#file_upload").uploadify('settings','formData' ,{'currentDirPath': /webroot/newsletter/update});
总结
- 用hidden input 保存key 和 token , 每次只能上传一个文件,
- 上传成功后重新请求key 和 token,
- 把返回的key 和 token 保存在hidden input 里。
获取文件名
上传之前,选中文件后获取文件名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onUploadFile' : function(file) {
alert('The file ' + file.name + ' is being uploaded.');
}
});
});
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onSelect' : function(file) {
alert('The file ' + file.name + ' was added to the queue.');
}
});
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadStart' : function(file) {
$("#file_upload").uploadify("settings", 'formData', {'title' : $("#title").val()});
}
});
});
本文网址: https://pylist.com/topic/61.html 转摘请注明来源