![](/img/trans.png)
[英]Upload file to Google cloud storage from Google App Engine (Java)
[英]Google app engine, Ajax, file upload,
在谷歌App Engine上,我想使用javascript(或Ajax)POST一个表单,然后更新目标div。 表单包含许多要传输的字段和文件。 javascript函数是从“Javascript:The Definite Guide”一书中复制而来的。 我有两个问题:
谢谢你的帮助。
base.html文件:
...
<div id="content">
{% include "form.html" %}
</div>
Image:<br />
<img src="/file?entity_id={{entity.key}}" />
<br />
<script type="text/javascript">
function postFormData(url, data, callback) {
if (typeof FormData === "undefined")
throw new Error("FormData is not implemented");
var request = new XMLHttpRequest();
request.open("POST", url);
request.onreadystatechange = function() {
if (request.readystate === 4 && callback)
callback(request);
};
var formdata = new FormData();
for (var name in data) {
if (!data.hasOwnProperty(name)) continue;
var value = data[name];
if (typeof value === "function") continue;
formdata.append(name, value);
}
request.send(formdata);
}
</script>
...
form.html
<form action="/form" method="POST" enctype="multipart/form-data">
name1: <input type="text" name="name" />{{ name1 }}<br /><br />
name2: <input type="text" name="name" />{{ name }}<br /><br />
...
file1: <input type="file" name="file" />{{ file1 }}<br /><br />
file2: <input type="file" name="file" />{{ file2 }}<br /><br />
...
<input type="submit" value="Submit" onclick="return postFormData('/form', howToPrepareData?, whatIsTheCallbackFunction?)" />
</form>
当您执行表单POST(用户单击提交按钮或通过JS调用)时,浏览器将重新加载窗口并显示POST的结果。 这显然不是你想要的。
解决方法是使用隐藏的<iframe>
作为Form POST操作的目标。 下面是一个示例: 如何通过ajax(no jquery)发送multipart / form-data表单内容?
现在简单的图片上传到这里:
HTML
<form action="/form/index.php?name=" class="imageform" method="POST" enctype="multipart/form-data">
name: <input type="text" name="name" class="name" /><br /><br />
file: <input type="file" name="file" class="file"/><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="callback">
</div>
JQUERY
$(document).ready(function()
{
$('.submit').on('click', function()
{
if($(".name").val()==""){
$(".name").val("Enter Name Here")
}
else {
var s = $(".name").val();
var n = $(".imageform").attr("action");
$(".imageform").attr("action", function() {
return s+n;
}
$("#callback").html('Uploading.....');
$(".imageform").ajaxForm(
{
target: '#callback'
}).submit();
}
});
});
还包括这个链接:
<script type="text/javascript" src="http://demos.9lessons.info/ajaximageupload/scripts/jquery.form.js"></script>
嘿,所有将在php文件中回显的文本将显示在#callback中。 所以,如果你想要预览图像,请回显那里的html,不要删除那个动作= / form / index.php?name =和php文件类型$ name = $ _ GET ['name'];
我想出了以下代码。 但是,奇怪的是,它有时会起作用,有时却没有。 失败时,Firebug中显示的错误消息是“ReferenceError:$未定义”。 有人能告诉我问题是什么,以及这是否是正确的解决方案? 谢谢。
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function(returnData) {
$('#content').html(returnData)
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.