<script>
var loadFile = function(event) {
var img=URL.createObjectURL(event.target.files[0]);
document.getElementById('Display1').style.backgroundImage= url(img);
};
</script>
<div class="HM1EI" id="Display1">
<button type="button" class="_1q_T1">
<label>
<input type="file" accept="image/*" name="image" id="file1" onchange="loadFile(event)" style="display: none;">
Add Media
</label>
</button>
</div>
I can't Upload the file on the background which I get from input type file.
You are not setting the background url correctly you should do it like this
document.getElementById('Display1').style.backgroundImage = `url('img_tree.png')`;
Put (url) in string
Related
The code below displays the path of the uploaded images. I am using a multi-step form with four image-uploading fields. The images upload, and it shows the full path in the preview page, but I want to display just the names with extensions of the images—not the full path. Please help me achieve that.
*Html form fields*
<p><input type="file" name="image" accept="image/*" id="id_post_image">
<input type="file" name="image2" accept="image/*" id="id_post_image2"></p>
<p>
<input type="file" name="image3" accept="image/*" id="id_post_image3">
<input type="file" name="image4" accept="image/*" id="id_post_image4"></p>
*preview form fields*
<div class="preview_img" id="review_Condition" name="review_Condition"></div>
<div class="preview_img" id="review_Condition2" name="review_Condition"></div>
<div class="preview_img" id="review_Condition3" name="review_Condition"></div>
<div class="preview_img" id="review_Condition4" name="review_Condition"></div>
*javascript image path display*
document.getElementById("review_Condition").innerHTML = document.getElementById("id_post_image").value;
document.getElementById("review_Condition2").innerHTML = document.getElementById("id_post_image2").value;
document.getElementById("review_Condition3").innerHTML = document.getElementById("id_post_image3").value;
document.getElementById("review_Condition4").innerHTML = document.getElementById("id_post_image4").value;
This pattern will do:
var filename = fullPath.replace(/^.*[\\\/]/, '')
Question duplicate and answer from :
How to get the file name from a full path using JavaScript?
I am trying to add multiple div tags within a form using JQuery:
Below is my initial HTML form:
<form action="" method="post">
<div id="div_file0">
<input type="file" name="files0[]" id="files0" multiple><br/>
</div>
<a href="#" id='more_files'>Click to add more files</a>
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
Upon clicking on Click to add more files, I want more div tags to be created as below:
<form action="http://localhost:5000/api/upload_file" method="post">
<div id="div_file0">
<input type="file" name="files0[]" id="files0" multiple=""><br>
</div>
<div id="div_file1">
<input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
</div>
Click to add more files
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
However, the new div tag replaces the existing content, and adds the new and old input tags within newly created div element.
<form action="http://localhost:5000/api/upload_file" method="post">
<div id="div_file1">
<input type="file" name="files0[]" id="files0" multiple=""><br>
<input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
</div>
Click to add more files
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
Javascript used is as below:
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','#more_files', function() {
var numOfInputs = 1;
while($('#files'+numOfInputs).length) { numOfInputs++; }//once this loop breaks, numOfInputs is greater than the # of browse buttons
console.log("numOfInputs:"+numOfInputs)
$("<br/>").insertAfter("#div_file"+(numOfInputs-1));
$("div")
.attr("id","div_file"+numOfInputs)
.insertAfter("#div_file"+(numOfInputs-1));
var input = $("<input type='file' multiple/>")
.attr("id", "files"+numOfInputs)
.attr("name", "files"+numOfInputs+"[]");
var remove = $("<a class='remove' href='#'>Remove file</a>")
.attr("id","remove_file")
.attr("name","remove_file"+numOfInputs)
.attr("value",numOfInputs);
$("#div_file"+numOfInputs).append(input,remove);
});
});
</script>
This rather redundant as you're using a multiple file input already.
If you really want to do it in this manner, then remove all id attributes from the HTML content you're going to repeat in the DOM. They aren't necessary and just create more needless complication. Then you can grab the first .div_file element, clone it, and insert it before the a in the form, like this:
$(document).ready(function() {
$(document).on('click', '#more_files', function() {
var $clone = $('.div_file:first').clone();
$clone.insertBefore('form a');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<div class="div_file">
<input type="file" name="files[]" multiple><br/>
</div>
<a href="#" id='more_files'>Click to add more files</a> After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
i have an input type file it's id is "icon" and it can be repeated many times.
So i have a button when i click on it
it will append a new input type file and i need to send the uploaded file from "icon" input to this new input with Jquery
here is my code
<input type="file" class="chooseFile" accept="image/*" id="icon">
<button type="button" id="add_item">add item</button>
<div id="appended_inputs"></div>
and here is jquery code
$('#add_item').click(function(){
$('#appended_inputs').append(
`<input type="file" id="new_icon"`>
);
$('#new_icon').val($('#icon').val());
});
Can anyone help me!
The problem with your solution is that you will have multiple elements with the same ID.
Try use this code, it might be what you want:
$('#add_item').click(function() {
$('#appended_inputs').append('<input type="file" class="new_icon" >');
$('.new_icon:last').get(0).files= $('#icon').get(0).files;
});
Demo
$('#add_item').click(function() {
$('#appended_inputs').append('<input type="file" class="new_icon" >');
$('.new_icon:last').get(0).files= $('#icon').get(0).files;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" class="chooseFile" accept="image/*" id="icon">
<button type="button" id="add_item">add item</button>
<div id="appended_inputs"></div>
I have a form to upload image with:
<div class="col-sm-4">
<input id="file_input" type="file" style="visibility: hidden; width: 0; height: 0" name="image[photo_new]" accept="image/*">
</div>
<div class="col-lg-8">
<div class="form-group row">
<label class="col-sm-3 control-label" for="title">
<label for="image_title">Title</label>
</label>
<div class="col-sm-9">
<input id="title" class="form-control" type="text" placeholder="Title" name="image[title]" maxlength="200">
</div>
</div>
</div>
I want when users click to #input_file area to choose image, then the after choosing file, the file name will display immediately in #title field. For example name.png should be name. I want to use JQuery to do this function but don't know how, any advises? Thank in advance.
You can use this.value to get the file value in a change event handler and then extract the name like
$('#file_input').change(function() {
//$('#title').val(this.value ? this.value.match(/([\w-_]+)(?=\.)/)[0] : '');
$('#title').val(this.files && this.files.length ? this.files[0].name.split('.')[0] : '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file_input" type="file" />
<input id="title" />
You can attach an event after the user chooses an image like this:
$(document).ready(function() {
$('#image').on('change', function(event) {
// and you can get the name of the image like this:
console.log(event.target.files[0].name);
});
});
If the html is like this:
<input type="file" id="image">
Use this sample code to show file name :
<input type="file" name="file" id="file" />
<button id="btn">Submit</button>
<div id="fname"></div>
$(function(){
$('#btn').on('click',function(){
var name = $('#file').val().split('\\').pop();
name=name.split('.')[0];
$('#fname').html(name);
});
})();
Here is Demo on jsfiddle
You can have name, size and type details of selected file using below code. have a look.
<form enctype="multipart/form-data">
<input id="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#file').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
</script>
I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.
<html>
<head>
<script type="text/javascript">
(function alertFilename()
{
var thefile = document.getElementById('thefile');
//here some action to write the filename in the input text
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
</body>
</html>
Here is a fully working example
JavaScript:
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("some_text").value = filename[filename.length-1];
};
HTML:
<form>
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
jsFiddle live example
Hope you find it helpful, Asaf
For the newcomers:
document.getElementById("thefile").onchange = function() {
document.getElementById("some_text").value = this.files[0].name;
};
/* BELOW FULLPATH VERSION (depending on browser)
document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br>
<br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
Just take the file input' value, split it and take the last index:
Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name
(Sorry that cant format my answer. I answered by a smartphone)