Question

我一直在尝试在网页上工作，这很简单，只是为了得到我的支持，因为我是一个真正的新手，当谈到与网络相关的所有事情。

我有一个带有表单的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输出。

非常感谢任何帮助！

提前谢谢大家。

Answer 1

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

<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']。文件。更多，你认为好，但执行不好:) 所有代码都必须在onsubmit函数内。您希望在用户单击表单中的按钮时将文件发送到服务器。在onreadystatechange中，考虑到python脚本发送带有以下信息的JSON：{'estado'：'inserido'，'fname'：'path / to / file / name.file'}，您可以验证是否有响应（aux ），为键'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获取输入，表单['fileobj']获取文件元素（注意，fileobj是我在javascript中设置formdata的名称，而不是输入的名称表单），然后使用文件元素，您可以访问文件名（fileElem.filename）和文件自己（fileElem.file）。

我希望我能帮忙。

如何在运行Python脚本后在上一页中添加照片

1 个答案: