This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Reading client side text file using Javascript
I want to open a txt file at client, parse it with javascript and post parsed data to a server page with ajax. I have scripts for parsing and posting. All i need now is to simply pick file from client computer.
What I need is something like this:
<div id="content">
<button id="selectFile" onclick="return selectFileClick();" />
</div>
When user clicks button, a file dialog box appears and returns selected file. With this file name, I will make other operations like parsing etc.
function selectFileClick()
{
var fileName = filedialog();
// parsing file...
return false;
}
Edit: I dont want to upload file and I have a custom design which doesnt look like;
<input type="file" id="file">
I need something like this: jquery file dialog plugin
Edit (2): I solved issue by this way;
$(function () {
$("#button1").click(function (event) {
event.preventDefault();
$('#file').trigger('click');
});
document.getElementById('file').addEventListener('change', readFile, false);
});
at html;
<input id="button1" type="submit" value="add" />
<input type="file" id="file" style="display: none">
I hope this helps someone else ;)
Have a look at this: HTML File API
That would probably be the easiest way to do it, e.g.
<input type="file" id="file">
Then just attach a function to the "onChange" function of the element.
EDIT: Just noticed that you're using jQuery, so you could really just do:
$("#file").change(function() { selectFileClick(); });
Related
I want to file load popup to appear after I use function loadFile(), because myInput is hidden.
//HTML
<div id ="hideWhiteSpace" style="display:none">
<input id="myInput" type="file"/>
</div>
Here is my javascript file example, onchange won't work cause i cant press the button.
//JS
function loadFile(){
document.getElementById('myInput').onchange = function (e){
//run code to load file into web.
}
}
Okay, I got it, just put this before onchange line:
document.getElementById('myInput').click();
I don't know if I should answer my own questions or delete the post if I got the answer.
Comment please.
I have PHP code which successfully gets the contents of a directory on my server.
I wish to then write this array to a specific div on my main html page (so that I can parse this later and use this information further)
Currently my PHP navigates me away from my current page to write this array which I want to prevent.
Furthermore I wish to do all of the PHP work on a button click, and return the values on the main html page after.
How can I do this???
My button on my html page is as follows:
<form action="PHP_Function.php">
<input type="submit" class="learnButton" name="insert" value="Find Available Evidence" />
</form>
And my PHP code looks like this to carry out the work:
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case 'insert':
insert();
break;
}}
I have an array: "IfPresentArray" which I then wish to write to my main html page:
if(in_array("Facebook.xml", $dirArray)){
$IfPresentArray[0]="1";
}else {
$IfPresentArray[0]="0";
}
Any help would be greatly appreciated as I am very new to PHP.
Thanks in advance
You need to use AJAX techniques to do this. Use a Javascript framework like jQuery to react to the button click, make a request to your PHP script, and then update the contents of the div.
See http://api.jquery.com/click/ for handling clicks, and http://api.jquery.com/jQuery.ajax/ for making the request.
Good luck!
You will need to use an ajax call. This allows your to click some div, send something to the server, receive a response and display an output in many different formats.
You can either reference the jQuery library in your header
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
or just download it and save it whereever
Here is a basic ajax call:
<script>
$(document).ready(function(){
$('#someval').click(function(){
var content = $('#somecontenttoadd').val; //this could be many things... etc(.text, .html)
$.ajax({
type:'post',
url: 'PHP_Function.php',
data: 'action='+content,
success: function(resp){
$('#somediv').html(resp); //lets put the information into a div
//this could be anything response format like .val or .text instead of .html
},
error: function(e){
alert('Error: ' + e);
}
});
});
});
</script>
HTML -- you can get rid of the tags and just use the id of the object.
<input type="submit" class="learnButton" name="insert" value="Find Available Evidence" id="someval"/>
As others said, AJAX is the solution, I will give you the code that works for me, so that you have an exact starting point.
As I understand you have a separate html page and a php file that includes your function.
In order to make this work you will have to implement a function with an AJAX call.
This should be placed in a javascript file and will be invoked after the form submit button is clicked on the html page.
The AJAX call will then invoke your php function, get the response data back from php.
The javascript function will update the html page in the end.
You will need three files:
main.html
script.js
function.php
Let me replace my original answer with a full example of the three files.
main.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form id="myForm" method="post" action="function.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</form>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-primary" id="SaveButton">Submit</button>
</div>
<div id="resultbox">
</div>
</div>
</body>
</html>
Here we included jQuery, our own javascript and bootstrap just to look better. the form action is our function.php, the form 'id' is used in our jQuery code. the "result box" box will display the response.
script.js
$(function(){
$("#myForm").submit(function(event) {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data)
{
//display data...
$("#resultbox").html(data.name).show;
}
});
return false;
});
});
this will override the default form submit behavior. I had a typo here in the original answer, I fixed it. url and data are taken from the html form, dataType is set to json, because we expect a json back.
function.php
<?php
echo json_encode(array('name' => $_POST['name']));
Our php code is just one line, we build an array and return it as json. You can then used in jQuery, just like any other json, as shown in the above code.
I try to open a file using jQuery. Here is my HTML,
<button onclick='load();'>load</button>
Here is my js code:
function load() {
var fileSelector = $('<input id="load" type = "file" multiple />');
fileSelector.click();
//code here to get the files ...
}
Now I want to get the loaded files, what should I do?
The HTML5 File Api (http://dev.w3.org/2006/webapi/FileAPI/) allows opening files, however the files must be selected by the User for security.
If you need to open a file without user interaction, then it is necessary to do this on the server side with a language like PHP for example.
Here's my solution
I used the file type input and then use the Jquery trigger function to trigger the click event for file input.
$(function(){
$("#btnFile").click(function(){
$("#file").trigger("click");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file" type="file" hidden/>
<button id="btnFile">Click Me</button>
You can open JSON file with JavaScript and use fetch('json_file patch') .
I've been trying add an image uploader for my website, and I have already written the uploader method in asp.net mvc. Since I don't want to have two buttons in my page (one for browse and one for upload) I decided to write another function using JQuery to handle it. At this point I've face the problem of having to know the <input type="file />" dialog result to run my uploader.
My question is that, is it possible to detect the user's choice (Open/Cancel) in JQuery ?
My code looks like this :
#using (HTML.BeginForm ("Upload", "SomeController", FormMethod.Post, new { enctype = "multipart/form-data" }))
<input type="file" name="file" id="file" class="Hidden" />
<input type="submit" id="upload" class="Hidden" />
}
<button id="UploadIt">Image</button>
and the java script:
$('#UploadIt').click(function() {
$('#file').trigger("clcik");
//now if (dialog result is Open) {$('#upload').trigger("click");}
// else {Do Nothing}
});
After reading the change() event documentation (dandavis mentioned it in the comment), I managed to fix the problem. However I decided to share my solution in case anyone faces the same issue.
$('#UploadIt').click(function () {
$('#file').trigger("click");
$(":file").change(function () {
if (this.files[0].size > 0) { Upload(); }
else { }
});
});
For a website, I will have a lot of auto complete fields on differents pages.
They works exactly the same on all pages, except they must not call the same url.
I was wondering if there is a possibility to mention the url on the <input> which is going to be an autocomplete field? The goal is to have one js code for many html codes
I tried something, but it doesn't seems to works:
Html:
<input type="field" name="search" class="autocomplete" value="Search" url="smalltest/otherTest/..." />
And the JS
$(document).ready(function () {
$("input.autocomplete").autocomplete({
source: $(this).attr("url")
}); });
I got exception in jquery lib.
Change the url attribute to data-url then in your .autocomplete do this:
source: $(this).data("url")