pyList

在 uploadify/uploadifive 上动态设置 formData

uploadify/uploadifive 是很棒的上传插件,有时候需要动态设置表单数据,下面就对动态设置表单做一下使用记录。

在 uploadify/uploadifive 上动态设置 formData

在 onAddQueueItem 事件里添加

如果是自动上传的,可在 onAddQueueItem 事件里添加一个函数设置 settings.formData,参考如下

(去掉formData,用下面的代替)

'onAddQueueItem' : function(file) {
    this.data('uploadifive').settings.formData = { 'someKey' : $('#formFieldID').val() };
}

手动上传

若要手动上传的,可在调用upload 前改变要引用的值,参考以下代码:

function uploadFiles() {
    $('#file_upload').data('uploadifive').settings.formData = { 'someKey' : $('#formFieldID').val() };
    $('#file_upload').uploadifive('upload', '*');
}

单独设置

'onUpload' : function(){
    $('#file_upload').data('uploadifive').settings.formData = { 'additional_form_data' : $('#additional_form_data').val() }
},

手把手一步一步设置

<input type="text" name="student" id="student" placeholder="Your Student ID" value="" />
$('#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
     },

});

$("#file_upload").uploadify('settings','formData' ,{'currentDirPath': /webroot/newsletter/update});

总结

  • 用hidden input 保存key 和 token , 每次只能上传一个文件,
  • 上传成功后重新请求key 和 token,
  • 把返回的key 和 token 保存在hidden input 里。

获取文件名

上传之前,选中文件后获取文件名

$(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/t/1416237067 (转载注明出处)
如果你有任何建议或疑问可以在下面 留言
发表第一条评论!
验证码图片
相关推荐