파이썬 스크립트를 실행 한 후 이전 페이지에 사진을 추가하는 방법

Question

웹 페이지에서 작업하려고 시도했습니다. 단순한 것입니다. 모든 것을 웹에 적용 할 때 나는 진정한 초보자입니다. 관련.

사용자가 파일을 업로드 할 수 있도록 양식의 HTML을 기본 페이지로 가지고 있으며, 업로드를 수행하는 Python 스크립트와 마지막으로 폼의 데이터를 가져 와서 Python으로 보내는 자바 스크립트 파일 스크립트. 다음과 같이

자바 스크립트 코드는 다음과 같습니다 내가 의도 한대로 대신 단지 파이썬 출력을 보여주는 형태에 따라 이미지를 삽입하지 않습니다에 대한

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); 
     } 
    } 
} 

불행하게도,이 작동하지 않습니다.

도움이 될 것입니다.

감사합니다.

Answer 1

먼저 이런 (이 필수 아님), 양식에 이름이 있어야합니다

이

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

그런 다음 양식을 "잡아"서버에 "보내기"를 자바 스크립트를 사용할 수 있습니다 (파이썬 스크립트)는 다음과 같습니다 :

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); 
} 

자바 스크립트 코드에서 samethings을 알아야합니다. 'this'는 형식입니다. 그러면이 [fileobj]를 할 때 입력에 있고 입력 요소에 업로드 할 파일이있는 개체가 있고 그 다음에 해당 파일을 선택할 수 있습니다. 첫째로 : this [ 'fileobj'] .files. 더, 당신은 잘 생각했지만 나쁜 실행 :) 모든 코드는 함수 onsubmit 안에 있어야합니다. 사용자가 양식의 단추를 클릭하면 파일을 서버로 보내려고합니다. onreadystatechange에서 python 스크립트가 { 'estado': 'inserido', 'fname': 'path/to/file/name.file'} 정보를 사용하여 JSON을 전송한다고 생각하면 응답 (aux) 키 'estado'에 대해 'inserido'값을 가져온 다음 해당 객체를 사용하여 업로드 된 경로 및 파일 이름으로 이미지를 만듭니다. 파이썬 스크립트에 신속하게 찾고

,이있을 수 있습니다 :이에서

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()를 사용하면 자바 스크립트에서 입력을 얻을 수 있습니다. 양식 [ 'fileobj']은 파일 요소를 가져옵니다 (예를 들어, fileobj는 자바 스크립트에서 formdata를 설정 한 이름이며, 입력 이름이 아닙니다. 양식), 파일 요소를 사용하여 파일 이름 (fileElem.filename) 및 파일 자체 (fileElem.file)에 액세스 할 수 있습니다.

도와줬으면합니다.