在上一篇文章中，我尝试使用 HTML 和 Javascript 将文件上传到服务器。我在实现时遇到了几个问题，因此我采取了不同的方法。我的网络服务器的 cgi 目录中有一个 HTML 表单和一个 python 脚本。这是我的 HTML 代码...
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5 seriously, why do I bother?
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("outputDiv").innerHTML=xmlhttp.responseText;
}
}
var file = document.getElementById('idexample').value;
xmlhttp.open("GET","/cgi/ajax.py?uploadFile="+file,true);
xmlhttp.send();
}
</script>
</head>
<body onload="changeInput()">
<form name = "form_input" enctype="multipart/form-data" method="POST">
<input type="file" ACCEPT="text/html" name="uploadFile" id="idexample" />
<button type="button" onclick="loadXMLDoc()">Enter</button>
</form>
<div id="outputDiv"></div>
</body>
</html>
我正在使用 AJAX，因为我发现我的 cgi 脚本可能需要几分钟才能运行，具体取决于用户输入的文件。我想做的是将文件的内容传递给我的 python CGI 脚本并将其打印在页面上。我得到的只是“C:\fakepath\”。我想做的是获取文件内容。这是我的 cgi 脚本...
#!/usr/bin/python
import cgi
form = cgi.FieldStorage()
print 'Content-Type: text/html\n'
if form.has_key('uploadFile'):
print str(form['uploadFile'].value)
else:
print 'no file'
我还应该使用
xmlhttp.open("POST","/cgi/ajax.py",true);
而不是
xmlhttp.open("GET","/cgi/ajax.py?uploadFile="+file,true);
我都尝试了，但 POST 甚至没有返回我的文件名。我还发现我读到我什至可能不需要脚本中的标签，因为我使用 javascript 提交了此信息。这是真的。我的页面似乎可以在没有表单标签的情况下运行(至少在 Chrome 和 Firefox 上)。
最佳答案
如果您使用 console.log() 检查变量 file，您会注意到它只包含文件名，而不包含其内容。
var file = document.getElementById('idexample').value;
console.log(file); // Outputs filename
通过 AJAX 上传文件的标准方法是使用 iframe。以下代码取自jquery.extras.js并基于malsup's form plugin .
<html>
<body>
<form id=input action=/cgi/ajax.py method=post>
<input type=file name=uploadFile>
<input type=submit value=Submit>
</form>
<div id=output></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$.fn.ajaxForm = function(options) {
options = $.extend({}, {
onSubmit:function() {},
onResponse:function(data) {}
}, options);
var iframeName = 'ajaxForm', $iframe = $('[name=' + iframeName + ']');
if (!$iframe.length) {
$iframe = $('<iframe name=' + iframeName + ' style="display:none">').appendTo('body');
}
return $(this).each(function() {
var $form = $(this);
$form
.prop('target', iframeName)
.prop('enctype', 'multipart/form-data')
.prop('encoding', 'multipart/form-data')
.submit(function(e) {
options.onSubmit.apply($form[0]);
$iframe.one('load', function() {
var iframeText = $iframe.contents().find('body').text();
options.onResponse.apply($form[0], [iframeText]);
});
});
});
};
$('#input').ajaxForm({
onResponse:function(data) {
$('#output').html(data);
}
});
</script>
</body>
</html>
你的CGI代码没问题。但是，我强烈建议使用像 Pyramid 这样的 Web 框架。或Django为了你自己的理智。
#!/usr/bin/python
import cgi
form = cgi.FieldStorage()
print 'Content-Type: text/html\n'
if 'uploadFile' in form and form['uploadFile'].filename:
print form['uploadFile'].value
else:
print 'no file'
关于javascript - 获取 python cgi 脚本来打开从 AJAX 传递给它的文件时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8647164/