0

我一直在尝试在网页上工作，一些简单的事情，只是为了了解我的方向，因为当涉及到与网络相关的所有事情时，我是一个真正的新手。

我有一个带有表单的 HTML 主页，允许用户上传文件，一个执行上传的 Python 脚本，最后是一个 Javascript 文件，它从表单中获取数据并将其发送到 Python 脚本。

Javascript代码如下：

document.forms[0].onsubmit = function(ev){
    ev = ev || event;
    ev.cancelBubble = true;
    ev.returnValue = false;
}

if (window.XMLHttpRequest)
{
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var formdata = new FormData();
formdata.append("fileobj", fileElem.filename); 
formdata.append("appearname", appearname);
formdata.append("appear", appear);

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.py");  
xhr.send(formdata);
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        xmlDoc=xmlhttp.responseXML;
        var aux = JSON.parse( xmlhttp.responseXML );
        if ( {"estado" == "inserido"} )
        {
            img.src = aux.name;
            var img = new Image();
            img.src = fileElem.filename
            img.height = '100px' // por exemplo
            document.body.appendChild( img );
        }
    }
}

不幸的是，这并没有按我的预期工作，因为它不会在表单下插入图像，而是只显示 Python 输出。

任何帮助将非常感激！

谢谢大家。

4

1 回答 1

0

首先，您的表单中应该有一个名称，如下所示（这不是强制性的）：

<form name='test'>
    <input type='file' name='fileObj' />
    <button>submit</button>
</form>

然后您可以使用 javascript 来“抓取”表单并将其“发送”到服务器（python 脚本），如下所示：

document.forms[ 'test' ].onsubmit = function( ev ) {
    ev = ev || event;
    ev.cancelBubble = true;
    ev.returnValue = false;

    var data = new FormData( );
    data.append( 'fileobj' , this[ 'fileobj' ].files[ 0 ] );

    if ( window.XMLHttpRequest ) xmlhttp = new XMLHttpRequest( );
    else xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );

    xmlhttp.open( "POST" , "upload.py" , true );

    xmlhttp.onreadystatechange = function( ) {
        if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
            var aux = JSON.parse( xmlhttp.responseText );
            if ( aux.estado == 'inserido' ) {
                var img = new Image();
                img.src = aux.fname;
                img.style.height = '100px';
                document.body.appendChild( img );
            }
        }
    }

    xmlhttp.send( data );
}

您必须注意，javascript 代码中的内容相同。'this' 是表单，然后，当你这样做时['fileobj']，你“在”输入中，输入元素有一个包含用户要上传的文件的对象，然后你可以选择第一个：这个['fileobj'].files。更多，你想得很好，但是执行不好 :) 所有这些代码，都必须在函数 onsubmit 中。当用户单击表单中的按钮时，您希望将文件发送到服务器。在 onreadystatechange 中，考虑到 python 脚本发送带有以下信息的 JSON：{ 'estado' : 'inserido' , 'fname' : 'path/to/file/name.file' }，您可以验证响应（辅助)，对于键 'estado' 有一个值 'inserido'，

快速查看 python 脚本，你可以得到这个：

import cgi
import json
import os

try:
    import msvcrt
    msvcrt.setmode (0, os.O_BINARY)
    msvcrt.setmode (1, os.O_BINARY)
except ImportError:
    pass

form = cgi.FieldStorage()
fileElem = form['fileobj']

open( fileElem.filename , 'wb' ).write( fileElem.file.read() ) 

print "Content-type: application/json"
print
print json.dumps( { 'estado' : 'inserido' , 'fname' : fileElem.filename } )

在此，我没有对输入进行任何类型的验证，也没有写入文件......但是，重要的是，如果你不知道脚本将在哪里运行，你必须尝试这样做（你需要Windows 中的 msvcrt）。使用 cgi.FieldStorage() 您可以从 javascript 获取输入，form['fileobj'] 获取文件元素（注意，fileobj 是我在 javascript 中设置 formdata 的名称，而不是输入的名称表单），然后使用文件元素，您可以访问文件名（fileElem.filename）和文件本身（fileElem.file）。

我希望我有所帮助。

于 2012-09-17T21:50:56.683 回答