Let user upload an xml file and parse it (without PHP)? [duplicate] - php

Question

This question already has answers here:
Reading file contents on the client-side in javascript in various browsers
(5 answers)
Closed 8 years ago.
I am quite knowledgeable in CSS(3) and HTML(5), but my current project allows me to take things further. However, this is completely unknown terrain for me. In my project I have a textarea in which users can submit some XML, which I then parse with jQuery's $.parseXML method. However, I want to add the ability to upload an XML file.
I suppose the upload button would look like this:
<form name="upload-form" action="???" method="???">
<input type="file" name="upload-field">
</form>
However, I do not know what the action and method ought to look like. Because I am staying on the same page and nothing spectacular is supposed to happen, I am guessing the action-attribute can be left out? The method-attribute might be get, rather than post? (1)
And then what? I don't know how I get the data from the uploaded XML document in my jQuery's parser. (2) Also, how to check for the correct file type? Does this have to happen server-side? (3)

Answer 1

action contains the name of the server side script that will receive the form data. when using post, the browser does not parse the content of the input field into the url.
the server side script, e.g. in php will receive the request, do security checks and save the data.
<form name="upload-form" action="serversidescript.php" method="post">
<input type="file" name="upload-field">
<input type="submit" value="Submit">
</form>
serversidescript.php
<pre>
<?php
print_r($_REQUEST); // shows the array containing the form data

Answer 2

leave the method empty and use the post method. Using post for files is important because it has security features and allows you to upload more data.
since it's uploading a file you need to add the enctype, enctype="multipart/form-data" or it won't work
<form name="upload-form" action="" method="post" enctype="multipart/form-data" >
<input type="file" name="upload-field">
<input type="submit" value="Submit">
</form>
ANd then to parse the file, you need to read the xml file using jquery and then write a parser function depending on what you need to do.
//write the custome parse function
function parse(data){
//code for your parse function goes here.
// to append the file to html, I need the actual structure of the file to show you
}
//this reads the xml file using jquery
$.ajax({
url: 'name.xml', // name of file you want to parse
dataType: "xml",
success: parse, //this calls the parse function
error: function(){alert("Error: Something went wrong");}
});