I am trying to get the full path of a file or a folder in html with a file selector.
I tried to use input with type file but it does not give me a correct path.
<html>
<head>
<title>Roy Baranes</title>
<script src="js/jquery-1.10.2.js"></script>
<link type="text/css" rel="stylesheet" href="css/styles.css">
<script>
$(document).ready(function(){
$("#getIt").click(function(){
alert($("#label").val());
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="form">
<input type="file" id="label">
<button id="getIt">Import</button>
</div>
<header>
<div>
<p>Welcome, please type text to search</p>
</div>
</header>
<form id="searchbox">
<input id="search" name="search" type="text" placeholder="Type here">
<input id="submit" type="submit" value="submit">
</form>
</div>
</body>
</html>
when I want to choose a folder, I use following code:
<input type="file" id="label" webkitdirectory directory multiple>
but after I choose and type import the alert shows me following path
c:\fakepath\ *the first file in the folder - whereas I was expecting this path: * \ the file name that i choose - when i choose file
Related
This is my first page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<h1>Customer Form</h1>
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="myFunction()">Submit</button>
</form>
<!-- JavaScript -->
<script type="text/javascript" src="./javascript.js"></script>
</body>
</html>
This is my second page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<p id="1"></p>
<!-- JavaScript -->
</body>
</html>
MY JAVASCRIPT
function myFunction() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
name = document.getElementById('name').value;
address = document.getElementById('address').value;
document.getElementById("1").innerHTML="<h1>alola="+name+"</h1>";
document.getElementById("2").innerHTML=address;
}
xhttp.open("GET", name);
xhttp.send();
}
I would like to display my name when typing my name from first page in the customer name label, and when i click submit. my second page display my name in the "id=1".
Ajax and ajax like techniques (fetch etc.) are usually used to either post data to a form or to get data from a url.
To send data from one HTML page to another you would need some kind of database and server side code to capture and store it and later retrive it.
If you just want inputed client side data to persist across pages then look at sessionStorage or localStorage, for example to keep the name we type until we exit the browser or clear session data:
First page:
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="">Submit</button>
</form>
<script>
const name=document.getElementById('name')
name.addEventListener("keyup", (e) => {
sessionStorage.setItem('uname', name.value);
});
</script>
Second page:
<body>
<p id="usersName"></p>
<script>
let userNameElm = document.getElementById('usersName');
userNameElm.innerText = sessionStorage.getItem('uname');
</script>
</body>
Just remember to be careful what you store, and that it's only stored on the frontend/client side.
I have a javascript at my server end. In that script after some functions are run i am getting a value which is particularly path of websocket.I am setting that path as an attribute of javascript object.That javascript object is a chat popup whose html exists on my website.
myscript.js
//----------some_exisiting_code-----------
var ws_path = "ws://some-ip-address/chat/id/" //This path is just an example.The path will be calculated dynamically by above existing lines of code.
$(".chat-popup").attr("path",ws_path);
//----------some_exisiting_code-----------
mypage.html
//Importing myscript.js from server
<script src="http://my-server-address/static/myscript.js"></script>
// passing value of "path" attribute as websocket endpoint
<script>
var endpoint = $(".chat-popup").attr("path");
var socket = new ReconnectingWebSocket(endpoint);
</script>
<div class="chat-popup">
<div class="chat-history">
<ul id='chat-items'></ul>
</div>
<div class="message">
<!------------Message to be sent----------------------->
<form id='form' method='POST'>
<input type="hidden" name="">
<input id="id_message" type="text">
<input type='submit' class='btn btn-primary'/>
</form>
<!------------------------------------------------------------------>
</div></div>
I am getting error:endpoint is undefined.
How can i solve this problem?
You can add your "myscript.js" file in the footer of the page. and you can also add "jquery.min.js" file.
myscript.js
//----------some_exisiting_code-----------
var ws_path = "ws://some-ip-address/chat/id/" //This path is just an example.The path will be calculated dynamically by above existing lines of code.
//alert(ws_path);
$(".chat-popup").attr("path",ws_path);
//----------some_exisiting_code-----------
mypage.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="chat-popup">
<div class="chat-history">
<ul id='chat-items'></ul>
</div>
<div class="message">
<!------------Message to be sent----------------------->
<form id='form' method='POST'>
<input type="hidden" name="">
<input id="id_message" type="text">
<input type='submit' class='btn btn-primary'/>
</form>
<!------------------------------------------------------------------>
</div>
</div>
</body>
</html>
<script src="myscript.js"></script>
<script>
$( document ).ready(function() {
var endpoint = $(".chat-popup").attr("path");
alert(endpoint);
var socket = new ReconnectingWebSocket(endpoint);
});
</script>
I hope to click "Upload Files" lable to display a foreground windows which include extra content, Submit and Close buttons in a html web page.
I write the following code, but it's ugly, and orginal UI is damaged when the is shown.
Is there a good way to do that? or a good control can do that?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WiFi File Transfer</title>
<meta charset="utf-8" />
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script src="js/user.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#UploadWindows").hide();
$("#UploadFile").click(function() {
$("#UploadWindows").show();
});
$("#Close").click(function() {
$("#UploadWindows").hide();
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="#">
<span id="UploadFile">Upload Files</span>
</a>
</div>
<div id="UploadWindows">
<form action="" method="post" enctype="multipart/form-data">
Please select files to upload <br />
<input type="file" name="myupload" multiple="multiple" />
<br />
<input type="submit" value="Upload Files" />
<br />
<span id="Close">Close</span>
</form>
</div>
<div id="Div1">
Other Content!
</div>
</div>
</body>
</html>
BTW, I think the edit popup window of stackoverflow is very good, I don't know if there is simple way do to it.
I am trying to implement bootstrap file input form GitHub in asp.net.
Below is my .aspc file code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="bootstrap-fileinput/js/fileinput.js"></script>
<link href="bootstrap-fileinput/css/fileinput.css" rel="stylesheet" />
<title></title>
<script>
$("#input-id").fileinput({
'showUpload': false,
'maxFileCount': 5,
'showPreview': false,
'mainClass': "input-group-lg"
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
</body>
</html>
It works. But I need to customize it.
I do not want preview of files ('showPreview': false)
I do not want to show Upload button ('showUpload': false)
I want to limit number of files ('maxFileCount': 5)
I have used required plugins for customization.
But Still I get default preview/output.
Can someone help with this?
Thanks for your help.
Your code has minor errors. You need to add "multiple" directive to your input tag and change class to: "file-loading".
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
And here is a working demo: https://jsfiddle.net/16jut54d/
Currently, I choose the file and upload using 2 different buttons as follows:
<input type="file" file-model="myFile" />
<button ng-click="uploadFile()">upload me</button>
Is it possible to choose the file and upload in 1 single button?
I tried the following but did not work.
<input type="file" file-model="myFile" onchange="uploadFile()" />
You can use ng-file-select like this:
<input type="file" ng-model="fname" ng-file-select="uploadFile($files)">
Inside your controller, you'll get object:
$scope.uploadFile = function($files) {
var file = $files[0];
console.log(file);
}
More details:
http://blog.gitbd.org/file-upload-by-angular-and-php/
try this
<input type="file" file-model="myFile" onChange="uploadFile()" />
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function uploadFile(){
alert("function accessed");
}
</script>
</head>
<body>
<input type="file" file-model="myFile" onChange="uploadFile()" />
</body>
</html>