Question

为什么drawUploader()没有将html追加到div drawUploader？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax File Upload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

function drawUploader()
{

    $("#drawUploader").append("<div id=\"upload_wrapper\">"+
                             "<form id=\"upload\" name=\"upload\" enctype=\"multipart/form-data' method='post' action='index.php' target='upload_target'>"+
                             "<input name='uploaded_file' type='file' size='30' id='uploaded_file'  />"+
                             "<input id='sent' name='sent' type='submit'  value='Upload' />"+
                             "</form>"+
                             "</div>"+
                             "<div id='loading' style='background:url(ajax-loader.gif) no-repeat left; height:50px; width:370px; display:none;'>"+
                             "<p style='margin-left:40px; padding-top:15px;'>Uploading File... Please wait</p>"+
                             "</div>"+
                             "<div id='image_wrapper' style='display:none;'><img id='preview' src='' /></div>"
                            );
}       
</script>
</head>

<body>
<input type="button" onclick="drawUploader()" value="start uplaod"  />
<div id="drawUploader"></div>
<iframe id="upload_target" name="upload_target" src="" style="width:10px; height:10px; display:none"></iframe>
</body>
</html>

Answer 1

您的表单属性中的引号不匹配。试试这个：

function drawUploader() {
    $("#drawUploader").append("<div id=\"upload_wrapper\">" + "<form id=\"upload\" name=\"upload\" enctype='multipart/form-data' method='post' action='index.php' target='upload_target'>" + "<input name='uploaded_file' type='file' size='30' id='uploaded_file'  />" + "<input id='sent' name='sent' type='submit'  value='Upload' />" + "</form>" + "</div>" + "<div id='loading' style='background:url(ajax-loader.gif) no-repeat left; height:50px; width:370px; display:none;'>" + "<p style='margin-left:40px; padding-top:15px;'>Uploading File... Please wait</p>" + "</div>" + "<div id='image_wrapper' style='display:none;'><img id='preview' src='' /></div>");
}

错误发生在enctype属性

上

Answer 2

您的<form>元素格式不正确。如果您在Chrome中使用开发工具，您会看到正在添加<div> upload_wrapper，而不是其他人。

将所有\"更改为单'，它运行正常。

jQuery .append（）函数不会插入到DIV中

2 个答案: