Link to home
Start Free TrialLog in
Avatar of dvcphp

asked on

Want to import the chosen csv files on the webpage .

Hello Experts,

I want to import a csv file on the wbpage when clicked on the import button.
I have used the jquery plugin csv2table for the import.
My problem is that I am unable to code the logic in a way that when I choose a particular csv file,I want to display it on the webpage.

Please have a look at the jsfiddle.

This jquery logic  must be changed.


Open in new window

Here,I must be able to to code the logic as per the CSV file chosen.
Avatar of ahoffmann
Flag of Germany image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Michel Plungjan
As I already suggested in the other question you posted, you need to upload the file to your server before you can load it. This is due to security issues ( same origin)
Avatar of dvcphp


Right now,I am trying to import the csv file from my client machine (For Demo)

But I agree with mplungjan (Expert) that the file must be on the server.
How do I import the CSV file from the server on to the webpage then?
It must be <input type="file"> so that I may be able to choose a particular CSV file and then must be able to import it on to the web page.

Let me know if I have made myself clear.
> import the csv file from my client
rather impossible due to same origin policy

> How do I import the CSV
you either need to import it there and covert to HTML as you like
or you can import it using XHR and use your client-side JavaScript to insert the values in your DOM
I guess the server-side solution is simpler to implement ...
Avatar of dvcphp


Could you please show me an example using AJAX to import the file.
I would appreciate.
// quick&dirty
xhr = new XMLHttpRequest();
req ="GET", "/your.csv", false);
req = xhr.send(null);
       // server should respond with content-type:text/plain
csv = xhr.responseText;
He is already using jQuery so no need for xmlhttp, just use the get from the fiddle
Avatar of dvcphp


Hello again..
I am dealing only with the front- end.I dont have to upload the file on the server using PHP.I only have to import the data at the front-end.When a particular CSV file is choosen, I just have to import its contents dynamically on the webpage without refreshing it using AJAX.
Please help.
Not possible using standard browsers as I have pointed out several times. It may be YOU don't need to upload but That is besides the point when the browser DO need the file to come from the same SERVER the script comes from
Avatar of dvcphp


Ok , I agree with you.Now,assuming that the CSV file is on the server and I need a script to call it at the front-end,How can I do this?

Can you please elaborate with an example.I think I am heading in the right direction.
already done (see above), but there may be other ways to do it with jquery
Avatar of dvcphp


Can you show the same with $ .ajax as the above code is confusing to me.
No need for $ajax

You have the code you need in your first post

<div id="CSVTable"></div>

$(function() {

Assuming you also include jQuery
nice feature of jquery ;-)
> No need for $ajax

how does the browser get the csv data if not via ajax call?
No need for $.ajax or xmlhttp
since the csvtotable does the Ajax for you.
Avatar of dvcphp


Now I am back to where I started.
Please see my jsFiddle link :

Here, I want to choose a particular csv file and show its data as table on the webpage.
Please let me know how to do it.
Your fiddle cannot do what you want.

You need a BACK END to upload to!!
Avatar of dvcphp


You mean the backend logic must be done in order to display the file selected.
if .csv is only on the client; then
  you need to upload the file to the server

To display the content rendered in the browser, your either
    need to convert the csv to HTML on ther server and send the result to the browser
   request the csv from within the browser and process it i.e. with jquery
Avatar of dvcphp


ahoffmann.....Please tell me how to do this..

"To display the content rendered in the browser, your either
    need to convert the csv to HTML on ther server and send the result to the browser
   request the csv from within the browser and process it i.e. with jquery"
mplungjan already showed in #38165518 how to do it

> tell me how to do this.
dvcphp, to me it sounds that you miss some basic concepts how HTTP works and you also use framework (PHP, jquery) without knowing what really happens on which end of the wire
no offence meant, but can you please tell us where exactly you have problems to understand what is suggested
Avatar of dvcphp


ok.The problem I have is this:

When a particular CSV file is choosen,Upload button is clicked and it is uploaded on the server.The backend person will do the logic of uploading the file on the server.
When the upload button is clicked,I am supposed to display that file in table format on the webpage.I have to display 3 or 4 rows of that table and not the whole table.

I hope I have made myself clear.Let me know.
> .. button is clicked and it is uploaded on the server
then the script receiving the file should parse it and convert to HTML as you need and respond with that result to the browser
Avatar of dvcphp


Yes it will be uploaded on the server when clicked on the uplaod button.

Now,after the upload is it possible to convert that file in to table and display it on the webpage.
this is where I am confused a lot.I haven't done this kind of logic before.
Is my question right? Can this be done using jquery??
> Can this be done using jquery??
if you mean on the server, no

> is it possible to convert that file in to table
yes, you script which receives the uploaded file, need to open it, read line by line amd convert each line with proper TR, TH and TD tags

don't know which technologie you use on the server, but probably it already has a function/method for that
Avatar of dvcphp


We are using JSP at the BACK END.
Avatar of dvcphp


Hello Experts and thank you all for trying to help me.

Below is the scenario and i want to make this clear.

First: Assuming  in the backend four(4)  csv files are uploaded in JSP.

Task: My task is to import  five rows of one(1) particular file( The original file has 50 rows) using  Jquery code.

Can you please provide jquery code to achieve this  


do you additional information about the back-end. The back-end technology is JSP.

Thanks a million
Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Of course first extract the lines needed before you save the file
Avatar of dvcphp


Hello All again,

As instructed by mplugjan above used the below link to test the task.

Used the link you provided to test the task.

Got the output exactly as shown on  the above link.

In the program,they are submitting the submit button after selecting the file to upload.jsp.I have done the same for demo purpose.

I doUser generated imageUser generated imagent want the page to submit to upload.jsp which is the  other page. "<FORM  ENCTYPE="multipart/form-data" action=
"upload.jsp" METHOD=POST>" Instead, it should  upload the logic on the same hello.jsp page.

In addition,when the file is uploaded,the details of the file along with its 3 rows of the information must be displyed on the same page.

The screenshots are attached:


index.jsp code is below

<%@ page language="java" %>
<HEAD><TITLE>Display file upload form to the user</TITLE></HEAD>  
<% //  for uploading the file we used Encrypt type of multipart/
//form-data and input of file type to browse and submit the file %>
  <BODY> <FORM  ENCTYPE="multipart/form-data" ACTION=
"upload.jsp" METHOD=POST>
        <center><table border="2" >
                    <tr><center><td colspan="2"><p align=
"center"><B>PROGRAM FOR UPLOADING THE FILE</B><center></td></tr>
                    <tr><td><b>Choose the file To Upload:</b>
                    <td><INPUT NAME="F1" TYPE="file"></td></tr>
                              <tr><td colspan="2">
<p align="right"><INPUT TYPE="submit" VALUE="Send File" ></p></td></tr>
      <script src="page.js" type="text/javascript"></script>

upload.jsp code is below

        //to get the content type information from JSP Request Header
        String contentType = request.getContentType();
        //here we are checking the content type is not equal to Null and
 //as well as the passed data from mulitpart/form-data is greater than or
 //equal to 0
        if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) {
                DataInputStream in = new DataInputStream(request.
                //we are taking the length of Content type data
                int formDataLength = request.getContentLength();
                byte dataBytes[] = new byte[formDataLength];
                int byteRead = 0;
                int totalBytesRead = 0;
                //this loop converting the uploaded file into byte code
                while (totalBytesRead < formDataLength) {
                        byteRead =, totalBytesRead,
                        totalBytesRead += byteRead;
                                        String file = new String(dataBytes);
                //for saving the file name
                String saveFile = file.substring(file.indexOf("filename=\"") + 10);

                saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
                saveFile = saveFile.substring(saveFile.lastIndexOf("\\")
 + 1,saveFile.indexOf("\""));
                int lastIndex = contentType.lastIndexOf("=");
                String boundary = contentType.substring(lastIndex + 1,
                int pos;
                //extracting the index of file
                pos = file.indexOf("filename=\"");
                pos = file.indexOf("\n", pos) + 1;
                pos = file.indexOf("\n", pos) + 1;
                pos = file.indexOf("\n", pos) + 1;
                int boundaryLocation = file.indexOf(boundary, pos) - 4;
                int startPos = ((file.substring(0, pos)).getBytes()).length;
                int endPos = ((file.substring(0, boundaryLocation))
                // creating a new file with the same name and writing the
//content in new file
                FileOutputStream fileOut = new FileOutputStream(saveFile);
                fileOut.write(dataBytes, startPos, (endPos - startPos));
                                %><Br><table border="2"><tr><td><b>You have successfully
 upload the file by the name of:</b>
                <% out.println(saveFile); %></td></tr></table> <%

page.js code is below

// JavaScript Document


  /*Hide  form1*/
  $("#CSVTable").CSVToTable("<% out.println(saveFile); %>")


Thanks a million
Sorry. You really need to pass this project to a developer with experience.

1) I do not see any jQuery or csvtotable JS files included anywhere
2) you cannot have jsp statements in static JS files
3) you need to be able to perform simple debugging using for example Firefox plus firebug, in which case you would see many solvable errors in th console.
4) there are no objects with ID=f1 - JavaScript is case sensitive and jQuery uses # for ID, not for name

EE is a place to get answers to coding issues, not to rent-a-coder unless you go to someone's profile and click "hire me" - in this particular case I am not available for hire since I do not do jsp
Avatar of dvcphp


Mplungjan ,Thank you so much for helping me .
There seems to be a great confusion from my end.I may have to figure it out at my work place.We are definitely missing the important puzzle somewhere and this confusion is the result of that.
Thanks to all the other Experts who tried to help me solve this problem.
You are welcome - good luck and feel free to come back for specific issues