如何在Uploadify中传递和接收formData值?

时间:2012-06-03 14:42:30

标签: php javascript jquery upload uploadify

我一直在尝试使用formData设置将数据从uploadify的客户端传递到服务器文件uploadify.php。我已尝试过在这里发布的许多解决方案和uploadify论坛,但没有用。

最初两个formData值都设置为字符串'empty',然后在上传开始时,eAlias设置为2并且eDate为日期。然后,服务器脚本通过POST接收这些值,并将它们回送到客户端脚本,该脚本在警报中显示此数据(在onUploadSuccess中)。在尝试的所有可能的解决方案中,值都是“”或“为空”,即onUploadStart中formData键的设置不起作用。

我已经在下面包含了大部分客户端脚本和服务器脚本。

非常感谢任何帮助或建议,谢谢。

客户端脚本:

<script type="text/javascript">
$(document).ready(function() 
{
    $(".uploadifyfile").uploadify(
    {
        'swf'           : '/xx/uploadify.swf',
        'uploader'      : '/xx/uploadify.php',
        'auto'          : true,     
        'height'        : 15,
        'method'        : 'POST',
        'multi'         : false,    
        'uploadLimit'   : 10,       
        'formData'      : { 'eAlias' : 'empty', 'eDate' : 'empty' },
        'onUploadSuccess' : function(file, data, response) 
        {   
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ' : ' + data);
            document.getElementById("adminForm")[buttonPressed].value = data;
        },
        'onUploadStart' : function(file) 
        {
            var eventDate = "<?php echo $this->row->dates; ?>";
            var eventVenue = 'test';
            alert('Venue Alias: ' + eventVenue + '\neventDate: ' + eventDate);

            //**** The line below is the one in question ****//
            $(".uploadifyfile").uploadify("settings", "formData", {"eAlias": 2, "eDate" : eventDate});
        },
        'onSelect' : function(event, ID, fileObj)
        {
            var eid = event.id;
            if(eid == "SWFUpload_0_0")
            {
                window.buttonPressed = "custom01";
                alert('1');
            }
            ...
        }
    });
});
</script>

服务器端脚本

$targetFolder = '/xx/uploads'; // Relative to the root

if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

    // Set $someVar to 'someValue'
    $eventAlias = $_POST['eAlias'];
    $eventDate = $_POST['eDate'];

    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
    $fileParts = pathinfo($_FILES['Filedata']['name']);

    if (in_array($fileParts['extension'],$fileTypes)) {
        move_uploaded_file($tempFile,$targetFile);
        echo $targetFolder . '/' . $_FILES['Filedata']['name'];
        echo ' eventAlias: '.$eventAlias.' eventDate: '.$eventDate;
    } else {
        echo 'Invalid file type.';
    }
}

2 个答案:

答案 0 :(得分:1)

问题就像我想的那样;这是因为我使用了uploadify按钮的多个实例并使用.uploadifyfile类引用它们。使用类时,Uploadify似乎没有完全发挥作用。

我想出的可能是基本的解决方案是使用'onSelect'函数将按下的按钮的id存储到全局变量(window.uploadid)中,然后在'onUploadStart'函数中使用它。现在,例如,当按下第二个按钮时,fileType属性将成功更改为finalDetails。

我曾经看过使用jQuery selectors,但在这种情况下它们似乎不适用于id,只是类。

我毫不怀疑将会对下面的代码进行一些优化,但我希望能够挽救与我工作时间相同的任何人。

<script type="text/javascript">
$(document).ready(function() 
{
    $(".uploadifyfile").uploadify(
    {
        ...
        'method'        : 'post',
        'formData'      : { 'eventDate' : 'notSet', 'eventVenue' : 'notSet', 'fileType' : 'notSet' },
        'onUploadStart' : function(file) 
        {
            var eventDate = "<?php echo $this->row->dates; ?>";
            var eventVenue = "<?php echo JFilterOutput::stringURLSafe($this->row->venue); ?>";
            $(uploadid).uploadify('settings','formData',{ 'eventDate' : eventDate, 'eventVenue' : eventVenue, 'fileType' : fileType });
        },
        'onSelect' : function(event, ID, fileObj)
        {
            alert('event.id:' + event.id);

            var eid = event.id;             // To determine which button was pressed

            if(eid == "SWFUpload_0_0")      // Flyer upload
            {
                window.buttonPressed = "custom01";
                window.uploadid = "#file_upload";
                window.fileType = "flyer";
            }
            else if(eid == "SWFUpload_1_0") // Final Details upload
            {
                window.buttonPressed = "custom02";
                window.uploadid = "#file_upload2";
                window.fileType = "finalDetails";
            }
            ...
        }
    });
});
</script>

...
<input type="file" name="file_upload" id="file_upload" class="uploadifyfile" />
...
<input type="file" name="file_upload2" id="file_upload2" class="uploadifyfile" />

答案 1 :(得分:0)

你的clientSide代码是对的。我使用相同的代码,它运行良好。所以你最好使用id来生成uploadify实例而不是类