0

这是我的结构：

<html>
<head>
    <title></title>
    <meta charset="utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="vendor/jquery.ui.widget.js"></script>
    <script src="jquery.iframe-transport.js"></script>
    <script src="jquery.fileupload.js"></script>
    <script src="main.js"></script>
</head>
<body>

    <div id="main">

    <input type='submit' value='Go' onClick='open_form();' />


</div>

<script>
$(function () {
    $('#fileupload').fileupload({
        url: 'upload.php',
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

</body>
</html>

main.js

function open_form() {
   $.get('test.php?rand',function(response){
        $('#main').html(response);
    });
};

测试.php

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

上传.php

<?php
$data = array('name' => 'Test');
echo json_encode('files' = > $data);

什么都没有发生或触发上传......我认为它可能是因为函数 ajax 请求函数调用，因为显示了“选择文件”，但是当我选择一个文件时没有任何反应。

http://i.imgur.com/gwq8xgf.png

4

1 回答 1

0

当此 div 不存在时，您尝试将 fileupload 插件附加到 #fileupload div。您文件中的事件过程是：

  1. 找到 #fileupload 并将 fileupload 插件附加到它
  2. 将外部数据加载到主窗体中附加到按钮

然后，您单击一个按钮，#fileupload 已加载，但没有附加插件。

解决此问题的选项之一是在加载层后执行附加过程 - 例如使 main.js 看起来像这样：

function open_form() {
    $.get('test.php?rand',function(response){
        $('#main').html(response);

        $('#fileupload').fileupload({
            url: 'upload.php',
            dataType: 'json',
                    done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });
};
于 2013-08-09T10:10:17.443 回答