0

私はWeb関連のすべてのことに関しては真の初心者であるため、自分のベアリングを取得するためだけに、単純なものであるWebページに取り組もうとしています。

ユーザーがファイルをアップロードできるようにするフォームを備えた HTML のメイン ページ、アップロードを行う Python スクリプト、最後に、フォームからデータを取得して Python スクリプトに送信する Javascript ファイルがあります。

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'はフォームであり、this ['fileobj']を実行すると、入力に「含まれ」、入力要素にはユーザーがアップロードするファイルを含むオブジェクトが含まれ、最初のファイルを選択できます。 ：this['fileobj'].files。さらに、あなたはよく考えましたが、実行は悪くなりました:)そのすべてのコードは、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から入力を取得でき、form ['fileobj']はファイル要素を取得します（fileobjは、javascriptでformdataを設定した名前であり、の入力の名前ではないことに注意してください。フォーム）、次にfile要素を使用して、ファイル名（fileElem.filename）とそれ自体のファイル（fileElem.file）にアクセスできます。

お役に立てば幸いです。

于 2012-09-17T21:50:56.683 に答える