Develop Reference

Upload (not read) a .xlsx file from HTML and send it (any way) to a PHP file

I have an .xlsx file and a html file with an < input type="file">. I just need upload it and send it to a php file (with js or any other way).
The php file expects an .xlsx file (for this reason I dont parse the .xlsx.) if I load it direct in the php file, works perfectly but I need to upload through an user interface, in this case an html view.
Regards.
Update:
Now the .html looks like this:
<div class="MainContainerPrice">
<form action="php/excel_to_mysql.php" method="POST">
<input type="file" name="excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<input type="submit">
</form>
</div>
And the .php looks like this:
<?php
include 'simplexlsx.class.php';
$file = $_FILES['excel'];
$xlsx = new SimpleXLSX('pricesExcel.xlsx'); //the file directly uploaded that I need to send from html.
...
?>
But now I have the next error:
Undefined index: excel in ...\excel_to_mysql.php on line 2.
Why doesn't recognize the name?

You need a bit of tweaking in the html and in the PHP part
<div class="MainContainerPrice">
<form action="php/excel_to_mysql.php" method="POST" enctype="multipart/form-data">
<input type="file" name="excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<input type="submit">
</form>
</div>
Note the enctype="multipart/form-data". That's needed to actually send the file.
The in the PHP file
<?php
include 'simplexlsx.class.php';
$file = $_FILES['excel']['tmp_name'];
$xlsx = new SimpleXLSX($file); //the file directly uploaded that I need to send from html.
...
?>
$_FILES['excel']['tmp_name'] contains the full path to the uploaded file, note that you can't rely on the name having the '.xlsx' extension, cause the file gets a random name for security purposes.
I strongly suggest you to use the file from within the temporary directory, and to delete it after use.
If the SimpleXLSXclass needs the '.xlsx' extension to work properly, you can try to add it to the temp file
rename($_FILES['excel']['tmp_name'],$_FILES['excel']['tmp_name'].'.xlsx');

Parsley validation input=file type required error message

I have a form with multiple file upload and the file field is required field with at-least one file is required to upload..
<input type="file" class="upload" name="file[]" multiple required/>
And class upload having on change event function to display list of uploaded files for that field and file type checking purpose.
My problem is on ajax form submit always parsley.validate return false..If i choose files also it returns false.
var check = $('#form').parsley().validate();
alert(check);
Any idea?

Should work. As always, post a live example

you can use this to check number of files in input
if( document.getElementById("uploadFile").files.length == 0 ){
console.log("no files selected");
}

Get value of file upload to a hidden text box

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.

How to filter input type="file" dialog by specific file type?

I want to restrict the browser to JPG files when I click on browse button of the <input type="file">.
Is it possible to browse for specific file types?

This will give the correct (custom) filter when the file dialog is showing:
<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">

See http://www.w3schools.com/tags/att_input_accept.asp:
The accept attribute is supported in all major browsers, except
Internet Explorer and Safari. Definition and Usage
The accept attribute specifies the types of files that the server
accepts (that can be submitted through a file upload).
Note: The accept attribute can only be used with <input type="file">.
Tip: Do not use this attribute as a validation tool. File uploads
should be validated on the server.
Syntax <input accept="audio/*|video/*|image/*|MIME_type" />
Tip: To specify more than one value, separate the values with a comma
(e.g. <input accept="audio/*,video/*,image/*" />.

Add a custom attribute to <input type="file" file-accept="jpg gif jpeg png bmp"> and read the filenames within javascript that matches the extension provided by the attribute file-accept. This will be kind of bogus, as a text file with any of the above extension will erroneously deteted as image.

<asp:FileUpload ID="FileUploadExcel" ClientIDMode="Static" runat="server" />
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" Text="Upload Excel File" />
.
$('#btnUpload').click(function () {
var uploadpath = $('#FileUploadExcel').val();
var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length);
if ($('#FileUploadExcel').val().length == 0) {
// write error message
return false;
}
if (fileExtension == "xls" || fileExtension == "xlsx") {
//write code for success
}
else {
//error code - select only excel files
return false;
}
});

var input = document.createElement('input');
input.type = 'file';
input.accept = '.jpg,.jpeg,.png'
input.click();

You can use the accept attribute along with the . It doesn't work in IE and Safari.
Depending on your project scale and extensibility, you could use Struts.
Struts offers two ways to limit the uploaded file type, declaratively and programmatically.
For more information:
http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes

Get files from input.files instead of value on submit

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