这是我的结构：
<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);
});
};
test.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请求函数调用，因为显示了"选择文件"，但当我选择一个文件时，什么都没有发生。
https://i.stack.imgur.com/EKme2.png
当#fileupload-div不存在时，您尝试将fileupload-plugin附加到该div。文件中的事件过程是：
- 找到#fileupload并将fileupload插件附加到其中
- 将加载到主窗体中的外部数据附加到按钮
然后，你点击一个按钮，#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);
});
}
});
});
};