I want to display the image uploaded in home.html to another page named result.html.
<div class="custom-file">
<input type="file" class="custom-file-input" name="myfile" onchange="readURL(this);">
<label class="custom-file-label" for="customFile" name="myfile">Choose file</label>
</div>
<div style="text-align: center;">
<input type="submit" class="mybtn" onclick="showInput();">
</div>
I want to show the uploaded image with name="myfile" in the result.html page.
How should i do it?
I would personally use a php upload page to upload the image and have one the page you want to show the image on have a php array for all the images that have been uploaded and foreach file with .jpg ect.. echo it in html
Many possibilities. Depends on the scope of your application and requirements.
Option 1 - Use a database
Store the uploaded picture to a database from the first page. The database could be anything - MySql , MSSQL, etc. The second page reads the picture contents from the database.
Option 2 - Use a memory cache
You could simply store the picture in a distributed memory cache like memcached or redis.
Option 3 - Use the file system
For very trivial applications (single web server), use the local file system as a data store. I would not recommend this.
Hope this helps.
If you want to do this without using any back-end languages or server side, yes you can!
There is a tricky way using JavaScript or jQuery:
Create a function to save an uploaded image into your project folder, and save uploaded image src in JS variable.
Create onclick function that get the image src from pre-defined variable.
Also this function will re-direct to your result.html page with the image src as parameter , like \result.html?img=SRC-FROM-FUNCTION.
On the other page, create a function to read this parameter and append an img tag with the src from the url.
However, i recommend using back-end language like PHP or C# to do this, this solution because you are using a simple static pages.
#1 Make div inside home.html <div id="foresult"></div> and store your value inside
#2 Make result.html
#3 Make <div id="result"></div> inside result.html
#4 Use this JQuery script inside result.html to get value from home.html
<script>
$(document).ready(function(){
$('#result').load('home.html #foresult');
});
</script>
Normally this would be done server side but you might be able to upload the file to local storage and then reference it on the next page. This wouldn't necessarily work in all browsers though.
https://stackoverflow.com/a/16505576/5065282
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
Related
So, I have trying to save uploaded files in a specific folder. Say, I have an html file as shown:
<form>
<input type="file" id="image_file" />
<input type="file" id="text_file" />
<input type="submit" />
</form>
Now, I want to write a js onsubmit function for the above form such that it saves the given file in a unique folder inside a base folder.
I had been researching various ways of doing this, and the only solution I found is using a server by making ajax calls, which I dont want to do.
Is there any native way in javascript that allows me to do this?
You can not store upload files to the server only using client-side Javascript. You need any backend language/technology. Javascript is the client-side language which runs only in the client's browser, so you need to send the selected file to the server and then save it on the server using any backend language (for example, php or 'node.js`)
Check out these links:
https://www.w3schools.com/php/php_file_upload.asp
https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp
i want to display pdf files in my website but unfortunately it will automatically download by idm.
here's my code:
$
<div class="viewerthesispdf">
<div id="viewer" class="pdf-viewer" data-url="<?php the_field('upload_pdfACField'); ?>"></div>
data-url is used to embed a file in a web page. That makes sense for images. It doesn't make sense for a PDF (or Excel or Word or most other file types) because normally these types of files are in place of a page, not a section of a web page. There are generally two solutions, depending on whether the files need to be restricted:
Use an href tag to reference the file. Download File1 I usually include target="_blank" in order to force a new page so that if there is a problem with the download you don't "lose" the original page, but it isn't strictly necessary. This will simply give a link to the file - and you can use a button, Font Awesome, images, etc. to make it fancier - but in the end "a link to a file".
Create a form which returns only the PDF as a result. Again I usually include target="_blank". The advantage of a form is that (a) the file doesn't have to actually exist on disk - it can be created by a script on-the-fly (technically this can be done with a link too - but typically a link would be a file rather than a script) and (b) you can include any necessary parameters for security, user-specific customization, etc. as part of the form. The form can use a GET or a POST depending on your preference.
Use href to show your pdf file list like this Filename , it will not start downloading automatically, only when user click on it, it will start download.
I'm setting up a typical profile picture upload and crop feature for a site. I'm looking at how others have set it up and I see that many are managing to have one input type="file" and it not only allows for selecting a file but also calls the PHP or JS to display the image.
I'm completely stuck on how to make it do something after the image has been chosen.
Does any one have a link or suggestion on how to perform this?
One way you could achieve this is to convert the file into a blob, then present it using an HTML5 canvas. Example: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Another option is to issue an AJAX request after the file input has been changed. Do whatever server processing you need to (crop, save, etc.) then return the AJAX call a path to the file. Then just append a new <img src='filepath.jpg' /> to the DOM.
I would upload the image using AJAX, having a API receiving the image. When image has been saved the API-method returns the path of the image.
You can then display the image using the path you recieved from your API-method.
I've a very small doubt. I've a html tag to browse the file. and as soon as I browse the file from the local server, I want to set that path to the source of image tag. Is it possible to implement?
I've code something like this.
<form name="image" id="image" enctype="multipart/form-data" action="" method="post">
<input type="file" name="img" />
<img src=""></img>
</file>
So as soon as I browse and select the file from the local server,that path should be set to image tag.My intention is to browse the image and display it in that page itself. Any help will be appreciated. Thanks in advance.
Browsers have now allowed you to access the path of a file from the input[type=file] tag for a long time. You can't simply do it like you're trying to. In order to accomplish your goal of showing the file after the user selects it, you actually need to upload it to your server. This typically requires a page-refresh, but there are plenty of javascript libraries that are available in order to make it happen without refreshing the page. Once the file is uploaded, you can "ping back" a URL to view the image, and load that in your image tag.
The jQuery library I've been using recently to do inline file uploads is jQuery File Upload
What you need is the full path to the file on the client side - which is not allowed (see also this thread).
Sorry mate, but without sending the file to the server you can't do anything with it other than getting the file name (not the path), the file type and the file size.
is there a way to load the full binary of an image in javascript?
what i want to do is to allow the user to preview an image before uploading it.
ie the user selects an image on his local drive (C:\image.jpg) , view it, and decides to upload or cancel.
i tried to set the source to the image path, but it didn't work since it is outside the webapplication project folder.
any help?
thx for your posts, but i ended up creating a temp folder on the server that stores the uploaded image using ajax. and when the user saves the data, the image is moved to another location, and the temp folder is deleted.
You can do something like this:
<img id="preview" src="" style="display:none;" />
<form>
....
<input type="file" id="file" />
....
</form>
<script type="text/javascript">
var file = document.getElementById("file");
var img = document.getElementById("preview");
file.onchange = function(){
img.src = file.value;
img.style.display = 'block';
};
</script>
There is no easy way, what You could do:
Preload image with some ajax file uploader to temp area and then let user decide
Use some third party written solution (f.ex. some flash component)
Here there is also similar question:
is it possible to preview local images before uploading them via a form?
You need server cooperation to access the image binary data. You won't be able to use the "Upload Form" to access the file info without uploading it to a server.
You could however do something like tell the user to paste the source binary data of the image in a textarea or something, then you can use JavaScript to load that binary data and display the actual image.
This is available in some browsers via the HTML5 file access API. Here is the Firefox documentation for file access.
As answered several times, you can't do this with plain HTML/JavaScript due to security restrictions. You need to send the image anyway. You can however handle this using a Java Applet since it runs entirely at the client machine and offers more control than HTML/JS. There are several free and ready-to-use ones. JumpLoader looks good and some major sites also uses it. With Flash it should also be possible, but I am not sure which ones offers this functionality. Check/tryout some Flash Multi File Uploaders.