2011-12-27 1 views
1

以前の投稿では、HTMLとJavascriptを使用してサーバーにファイルをアップロードしようとしていました。私は実装にいくつかの問題がありましたので、私は別のアプローチを取ってきました。私は私のWebサーバーのcgiディレクトリにHTMLフォームとPythonスクリプトを持っています。私のCGIスクリプトは、ユーザーが入力したファイルに応じて、実行するために数分を取ることができることを私に発生したので、ここに私のHTMLコードは、私はAJAXを使用しています...AJAXからファイルを開くためにpython cgiスクリプトを取得する際に問題が発生しました

<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> 

です。私がしようとしているのは、私のpython CGIスクリプトに渡されたファイルの内容を取得し、それらをページに出力することです。私は取得していますすべてが「あるC:\ fakepath \私は何をしたい。また

#!/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); 
を使用する必要があります...ここに私のCGIスクリプトがあるファイルの内容を取得することです。

代わりの

xmlhttp.open("GET","/cgi/ajax.py?uploadFile="+file,true); 

私は両方を試してみましたが、POSTの1も私のファイルの名前を返しません。また、私が提出するので、私も私のスクリプトのタグを必要としないかもしれないことを読むことを私に発生しましたこの情報はJavaScriptを使用しています。私のページはフォームタグなしで動作するようです(少なくともChromeとFirefoxでは)。

答えて

1

ファイルをconsole.log()を使用して調べると、ファイル名のみが含まれていて、その内容は含まれていないことがわかります。

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のようなWebフレームワークを使用することを強くお勧めします。

#!/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' 
+0

ああ。ありがとうございました。私はずっと前にこの問題を解決しました。私は将来の参考にこれを念頭に置いておきます。 – b10hazard

+0

@nater、あなたのソリューションを投稿できますか?それは他の人には役に立ちます。 –

関連する問題