Question

在上一篇文章中，我尝试使用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上）。

Answer 1

如果使用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或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'

在获取python cgi脚本打开从AJAX传递给它的文件时遇到问题

1 个答案: