I'm trying to get the value or file path from a html file upload control to a hidden input text box as soon as I select a file.
<input type="file" name="some_name" id="file" />
<input type="text" name="text_name" id="abc" style="display:none;" value=""/>
and my script looks like:
$('#file').live('change', function(){ alert("yes"); });
so I get the alert box but I would like to change the value of the hidden input field to the path of the file I select. Any help to solve this problem is highly appreciated.
Usually you get an element's value with $('#elementId').val(), but in the case of a an <input type="file"> you can't, because of security restrictions. There is no way to know the local file path (at least none that works consistently on all browsers).
To get the file path of an upload control <input type='file'> you can do the following:
var value = $('#elementID').val();
var value = value.substr(value.lastIndexOf('\\') + 1);
This will trim off any file path that comes before the filename. In the case of IE and Firefox the full file path and in the case of Chrome and Safari the C:\Fake Path.
See the associated jsfiddle:
Fiddle
Does it work ?
$('#file').change(function() {
$('#abc').val($(this).val());
});
I guess it doesn't: see bfavaretto answer.
Related
What I want is as soon I choose a file in a file input I want to get the file name in text box named file_name without any click or submit button. I could not figure out the code for it.
<input type="text" name="file_name" id="file_name" class="cfGradient inputField">
<input type="file" name="img1" id="img1" onchange="document.getElementById('file_name').value = this.value">
When I am selecting any file from my E drive the output was c:/fake path/selected file but I need the original path of the selected file. Please provide me the code and idea.
you can use like this.
<input type="file" name="file_name" id="file_name" class="cfGradient inputField">
<script type="text/javascript">
function getFilePath(){
$('input[type=file]').change(function () {
var filePath=$('#file_name').val();
});
}
</script>
hope this will help you thanx.
I have a html input type file control. When I select a file with very big name, it shows complete filename in firefox which causes bad UI. Is there any solution for this problem like changing name etc?
You can handle it this way:
Make your html input file control hidden and add onchange event handler to change selected file name
Add a readonly html textbox control for showing changed file name
Add html button control with onclick event handler to trigger file control's click event
DEMO here
HTML:
<input type="text" id="txtFile" readonly="true" />
<input type="button" id="btn" value="Browse..." onclick="browseFile();" />
<input type="file" id="file1" name="file1" onchange="setFileName(this.value);" />
CSS:
#file1 {
display: none;
}
JS:
function browseFile() {
document.getElementById('file1').click();
}
function setFileName(fileName) {
/* Manipulate file name here */
fileName = fileName.substr(0, fileName.lastIndexOf('.'));
document.getElementById('txtFile').value = fileName;
}
There is three possible answers I know:
You can style size of your input, and then browser cut longer names to given size (with '...' at the end of visible part).
You can not change from script the value of file input for security reason. The same is with trigger its click event. So the answer in this case is No.
You can cover whole file input with "pseude custom css". It is not real input styling but uses some trick with opacity. Look here for more details.
I've seen several ways to display image preview but none of them seem to work or they work only in FF/Chrome.
Trying to keep it simple:
Markup:
<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>
<img src='#Url.Image("logo.png")' alt="Preview" id="logo-preview"/>
Javascript:
<script type="text/javascript">
function changePreview() {
var input = $('#logo-upload').val();
$('#logo-preview').attr('src', input)
.width(150)
.height(50);
}
</script>
When debugging input shows the correct local image path but preview never shows up.
Why and how can I get this to work (in all browsers ) ?
Thanks.
Try setting the $('#logo-upload').change(function(){}) instead of using onChange. I think that's a good start. Then put the jQuery inside $(document).ready(function(){}). That could be another issue, if you're setting the script before the elements exist on the page.
If you can post more code, it would be beneficial.
Also, for IE, you're going to run into permissions issues that are on the user, which you don't have control over (at least in this situation). So, in those cases, you'll either have to upload the image first, to get the image from the server, OR they'll have to change their security settings to allow for this type of content to be accessed.
<input type="file" id="logo-upload" />
<br/>
<img src="#Url.Image('logo.png')" alt="Preview" id="logo-preview"/>
<script type="text/javascript">
$(document).ready(function() {
$('#logo-upload').change(function() {
var input = $(this).val();
$('#logo-preview').attr('src', input).width(150).height(50);
})
});
</script>
I am using input tag with attribute type="file" in HTML.
If I browse and select image and try to get path of file with $('file_upload').val() in script it returns path as "C:\fakepath\img_name"*
I need to get this path and set as default to input tag from JavaScript.
Please help me with this.
Script:
$(document).ready(function() {$('#imgUpload_edit').change(
function(){if ($(this).val()) {alert($('#imgUpload_edit').val());} }); });
HTML:
<FORM id="frmImgUpload_edit" ENCTYPE="multipart/form-data" ACTION="" METHOD="POST">
<label for="imgUpload_edit" id="bold-text_edit">Select an image for the Device Type:</label>
<input type="file" id="imgUpload_edit" name="deviceTypeImage_edit" size="10000"/>
<div id="imageEditDeviceType"></div>
</FORM>
Sorry, that can't be done. It's a security feature.
Can you create an input element using jQuery instead setting the value attribute of the input to the val of the element you want to get it from?
jQuery('input').attr("value",$('#imgUpload_edit').val())
You can string additional .attr such as id, etc as needed.
I have following problem. I have input field in form, type of file:
<FORM action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
I am setting using JavaScript also files property of this input and I want this input on submit of form send the file property instead of his value. Is it possible to do so?
var data = e.dataTransfer;
var input = dojo.byId(inputName);
var file = data.files[i];
input.files[0] = file;
data is a datatransfer object, I am getting files from there.
I know, it will be possible only in few browsers, I dont care. I just need to get it working at least in FF.
So if I understand you correctly you drop some files and you want to populate a file input object
I see a drop example here http://help.dottoro.com/ljslrhdh.php
but to populate the file field you will need a pretty heavy privilege change using a signed script - UniversalFileRead is probably the one you need