How to upload a file and display its information

Question

I want to build a web service that will process some files.

Here is what I want to do:

User uploads a file to the server using "upload form", the file is saved as a temporary file on the server-side
Server-side python script processes the temporary file and produces some statistics (for example, number of lines and words in the file)
The statistics are displayed near the "upload form"

The question here is: I would like the file to be processed in the background just after it is uploaded, and after it is done, .append() the produced results to the current view. I do not want to assign a script to <form action="processing_script.php">... because the user will be redirected to the processing_script.php after clicking the Upload button.

Any clues? Maybe some neat ajax call?

This answer here might help a little: http://stackoverflow.com/questions/3080922/ajaxform-and-app-engine-blobstore/4334677#4334677 — sje397, Aug 01 '11 at 07:23

score 1 · Answer 1 · answered Aug 01 '11 at 07:25

 function ajaxRequest(){
  var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
  if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
   for (var i=0; i<activexmodes.length; i++){
    try{
     return new ActiveXObject(activexmodes[i])
    }
    catch(e){
     //suppress error
    }
   }
  }
  else if (window.XMLHttpRequest) // if Mozilla, Safari etc
   return new XMLHttpRequest()
  else
   return false
 }

 function postFile(){
 var mypostrequest=new ajaxRequest()
 mypostrequest.onreadystatechange=function(){
  if (mypostrequest.readyState==4){
   if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
    document.getElementById("my_Result_tag").innerHTML=mypostrequest.responseText //this is where the results will be put!
   }
   else{
    alert("An error has occured making the request")
   }
  }
 }
 var file = document.getElementById("my_file");
 var parameters="file="+file //i am not sure of this peice though
 mypostrequest.open("POST", "basicform.php", true)
 mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
 mypostrequest.send(parameters)
 }

Wouldn't wrapping all the dirty ajax stuff solve the compatibility issues? — Jakub M., Aug 01 '11 at 07:38

score 0 · Answer 2 · answered Aug 01 '11 at 07:21

0

Yeah, you'll need ajax for that. Create the form as usual, then submit it using Ajax. Form handling can be done as usual.

If you google 'file upload Ajax' I'm sure you can find everything you need :)

answered Aug 01 '11 at 07:21

Johan

1,537
1
11
17

score 0 · Answer 3 · answered Aug 01 '11 at 07:21

yeah, i'd made second ajax request and run it with schedule (e.g. every 10 seconds). it will query the server if uploaded file is processed. the server may even do the file processing in external program. the php-script that accepts second ajax request checks some READY status and give client the answer YES/NO/FAILED. when client accepts YES answer it refirects user to the RESULTS PAGE. if it accepts NO, it alerts user the problem.

How to upload a file and display its information

3 Answers3