Is there any way to check file size before uploading it using JavaScript?
Yes, you can use the File API for this.
Here's a complete example (see comments):
document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
// (Can't use `typeof FileReader === "function"` because apparently it
// comes back as "object" on some browsers. So just see if it's there
// at all.)
if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
console.log("The file API isn't supported on this browser yet.");
return;
}
var input = document.getElementById('fileinput');
if (!input.files) { // This is VERY unlikely, browser support is near-universal
console.error("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
addPara("Please select a file before clicking 'Load'");
} else {
var file = input.files[0];
addPara("File " + file.name + " is " + file.size + " bytes in size");
}
});
function addPara(text) {
var p = document.createElement("p");
p.textContent = text;
document.body.appendChild(p);
}
body {
font-family: sans-serif;
}
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>
Slightly off-topic, but: Note that client-side validation is no substitute for server-side validation. Client-side validation is purely to make it possible to provide a nicer user experience. For instance, if you don't allow uploading a file more than 5MB, you could use client-side validation to check that the file the user has chosen isn't more than 5MB in size and give them a nice friendly message if it is (so they don't spend all that time uploading only to get the result thrown away at the server), but you must also enforce that limit at the server, as all client-side limits (and other validations) can be circumvented.
Using jquery:
$('#image-file').on('change', function() {
console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">
Upload image:
<input id="image-file" type="file" name="file" />
<input type="submit" value="Upload" />
</form>
Works for Dynamic and Static File Element
Javascript Only Solution
function validateSize(input) {
const fileSize = input.files[0].size / 1024 / 1024; // in MiB
if (fileSize > 2) {
alert('File size exceeds 2 MiB');
// $(file).val(''); //for clearing with Jquery
} else {
// Proceed further
}
}
<input onchange="validateSize(this)" type="file">
It's pretty simple.
const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>
if (oFile.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
No Yes, using the File API in newer browsers. See TJ's answer for details.
If you need to support older browsers as well, you will have to use a Flash-based uploader like SWFUpload or Uploadify to do this.
The SWFUpload Features Demo shows how the file_size_limit setting works.
Note that this (obviously) needs Flash, plus the way it works is a bit different from normal upload forms.
If you're using jQuery Validation, you could write something like this:
$.validator.addMethod(
"maxfilesize",
function (value, element) {
if (this.optional(element) || ! element.files || ! element.files[0]) {
return true;
} else {
return element.files[0].size <= 1024 * 1024 * 2;
}
},
'The file size can not exceed 2MiB.'
);
I made something like that:
$('#image-file').on('change', function() {
var numb = $(this)[0].files[0].size / 1024 / 1024;
numb = numb.toFixed(2);
if (numb > 2) {
alert('to big, maximum is 2MiB. You file size is: ' + numb + ' MiB');
} else {
alert('it okey, your file has ' + numb + 'MiB')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">
Even though the question is answered, I wanted to post my answer. Might come handy to future viewers.You can use it like in the following code.
document.getElementById("fileinput").addEventListener("change",function(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert("Got the file\n" +
"name: " + f.name + "\n" +
"type: " + f.type + "\n" +
"size: " + f.size + " bytes\n" +
"starts with: " + contents.substr(1, contents.indexOf("\n"))
);
if (f.size > 5242880) {
alert('File size Greater then 5MiB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
})
<input type="file" id="fileinput" />
I use one main Javascript function that I had found at Mozilla Developer Network site https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications, along with another function with AJAX and changed according to my needs. It receives a document element id regarding the place in my html code where I want to write the file size.
<Javascript>
function updateSize(elementId) {
var nBytes = 0,
oFiles = document.getElementById(elementId).files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
}
return sOutput;
}
</Javascript>
<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>
<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>
Cheers
JQuery example provided in this thread was extremely outdated, and google wasn't helpful at all so here is my revision:
<script type="text/javascript">
$('#image-file').on('change', function() {
console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
});
</script>
I ran across this question, and the one line of code I needed was hiding in big blocks of code.
Short answer: this.files[0].size
By the way, no JQuery needed.
You can try this fineuploader
It works fine under IE6(and above), Chrome or Firefox
I use this script to validate file type and size
var _validFilejpeg = [".jpeg", ".jpg", ".bmp", ".pdf"];
function validateForSize(oInput, minSize, maxSizejpeg) {
//if there is a need of specifying any other type, just add that particular type in var _validFilejpeg
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFilejpeg.length; j++) {
var sCurExtension = _validFilejpeg[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length)
.toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, this file is invalid, allowed extension is: " + _validFilejpeg.join(", "));
oInput.value = "";
return false;
}
}
}
fileSizeValidatejpeg(oInput, minSize, maxSizejpeg);
}
function fileSizeValidatejpeg(fdata, minSize, maxSizejpeg) {
if (fdata.files && fdata.files[0]) {
var fsize = fdata.files[0].size /1024; //The files property of an input element returns a FileList. fdata is an input element,fdata.files[0] returns a File object at the index 0.
//alert(fsize)
if (fsize > maxSizejpeg || fsize < minSize) {
alert('This file size is: ' + fsize.toFixed(2) +
"KB. Files should be in " + (minSize) + " to " + (maxSizejpeg) + " KB ");
fdata.value = ""; //so that the file name is not displayed on the side of the choose file button
return false;
} else {
console.log("");
}
}
}
<input type="file" onchange="validateForSize(this,10,5000);" >
If you set the Ie 'Document Mode' to 'Standards' you can use the simple javascript 'size' method to get the uploaded file's size.
Set the Ie 'Document Mode' to 'Standards':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Than, use the 'size' javascript method to get the uploaded file's size:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
It works for me.
Simple way is
const myFile = document.getElementById("fileUpload").files[0];
if (myFIle.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
Related
We have some documentation files in our company that go to customers, and I noticed that some links are saved as absolute references, so for example to \server001\Files..., which of course won't work for customers. So I wrote code that takes all files in a folder, and changes the links from absolute references to local references.
toc = WordprocessingDocument.Open(pathFile, true);
var baseUri = new Uri(pathFile, UriKind.Absolute);
IEnumerable<HyperlinkRelationship> all_hr = toc.MainDocumentPart.HyperlinkRelationships;
for (int index = 0; index < all_hr.Count(); index++)
{
HyperlinkRelationship hr = all_hr.ElementAt(index);
string link = hr.Uri.OriginalString.Replace("%20", " ");
if (!(link.EndsWith(".doc") || link.EndsWith(".docx")))
continue;
if (hr.Uri.IsAbsoluteUri)
{
var newHr = new Uri(link, UriKind.Absolute);
link = baseUri.MakeRelativeUri(newHr).OriginalString;
}
log.Info("Changed: " + hr.Uri.OriginalString + " to: " + link + " in file: " + sourceFile);
var hyperlinkRelationshipId = hr.Id;
toc.MainDocumentPart.DeleteReferenceRelationship(hr);
try
{
toc.MainDocumentPart.AddHyperlinkRelationship(new Uri(link, UriKind.Relative), false, hyperlinkRelationshipId);
}
catch (Exception)
{
// This would be reached if link is still absolute. Never called.
}
}
toc.Save();
toc.Close();
When I debug this, it finds absolute links just fine, and they are all stored back as relative links.
But if I then take a look at the files that were "fixed", suddenly different references that I did not even touch in the code are changed, and absolute again (to file:///\\Server001\Files\...).
Is my understanding of references in Word false, or what might be happening here?
Sample log output:
16:49:43,738 [DOC2PDF] INFO - Changed: file:///\\Server001\Files\Main\RSL.doc to: ..\Main\RSL.doc in file: file:///\\Server001\Files\Main\INDEX.doc
I recently started experimenting with HtmlAgilityPack, and the following code is working for what I want to achieve.
But since I just started exploring this, I was wondering if there was a better way then using so many PreviousSibling tags
var Application_Html = #"https://wiki.profittrailer.com/doku.php?id=application.properties";
HtmlWeb Internet_Load_Connection = new HtmlWeb();
var Application_Html_Loaded = Internet_Load_Connection.Load(Application_Html);
var Wiki_Application_Part_Loaded = Application_Html_Loaded.DocumentNode.SelectSingleNode("//div[#class ='dw-content']");
var divs = Application_Html_Loaded.DocumentNode.Descendants("div").Where(node => node.GetAttributeValue("class", "").Equals("level5")).Where(node => node.ParentNode.GetAttributeValue("class", "").Equals("dw-content")).ToList();
foreach (var s in divs)
{
if (s.InnerText.IndexOf(" ") > 0)
{
if (s.PreviousSibling.PreviousSibling.Id.Contains("default_api") || s.PreviousSibling.PreviousSibling.Id.Contains("trading_api"))
{
textBox1.AppendText(s.PreviousSibling.PreviousSibling.PreviousSibling.PreviousSibling.PreviousSibling.PreviousSibling.Id + "\n");
textBox1.AppendText(s.PreviousSibling.PreviousSibling.PreviousSibling.PreviousSibling.PreviousSibling.PreviousSibling.InnerText + "\n");
textBox1.AppendText(s.ChildNodes[3].InnerText + "\n");
textBox1.AppendText("\n");
textBox1.AppendText(s.PreviousSibling.PreviousSibling.Id + "\n");
textBox1.AppendText(s.PreviousSibling.PreviousSibling.InnerText + "\n");
textBox1.AppendText(s.ChildNodes[3].InnerText + "\n");
textBox1.AppendText("\n");
}
else
{
textBox1.AppendText(s.PreviousSibling.PreviousSibling.Id + "\n");
textBox1.AppendText(s.PreviousSibling.PreviousSibling.InnerText + "\n");
textBox1.AppendText(s.ChildNodes[3].InnerText + "\n");
textBox1.AppendText("\n");
}
}
}
The idea behind this is to scrape the wiki to see if anything has changed and if so to update/notify me if changes are needed.
Example html piece for reference
<h5 id="tradingexchange">trading.exchange</h5>
<div class="level5">
<pre class="code file java">trading.<span class="me1">exchange</span> <span
class="sy0">=</span> BITTREX</pre>
<p>
Use to set the exchange you want the bot to connect to. Possible values
(POLONIEX, BITTREX, BINANCE).
Must be in CAPITALS.
</p>
<hr />
</div>
all is in the div class="dw-content" which I extract first
h5 id is needed to check if new option are added
h5 innertext is need to check the formatting
p innertext to check if the description is updated or not
When I add new controls to my web application, the javascript does not fire. I've tried many solutions, but none of them work. Specifically, the accordion/accordion pane from the AJAX Control Toolkit does not slide up/down. Also the FileUploadProgress control from Obout uses javascript functions which do not fire. If I open a new web application project and try all this, it works just fine. My project is quite large so I cannot start from scratch. Can someone please tell me what could be wrong with my project? I have no errors. The javascript simply does not fire. Please help. I am using asp.net c#.
EDIT:
Here is the code for file upload progress control. I do have alert statements but they do not fire.
<script type="text/JavaScript">
function Clear() {
alert("here1");
document.getElementById("<%= uploadedFiles.ClientID %>").innerHTML = "";
}
function ClearedFiles(fileNames) {
alert("here2");
alert("Cleared files with bad extensions:\n\n" + fileNames);
}
function Rejected(fileName, size, maxSize) {
alert("here3");
alert("File " + fileName + " is rejected \nIts size (" + size + " bytes) exceeds " + maxSize + " bytes");
}
</script>
<input type="file" name="myFile1" runat="server"/><br/>
<input type="file" name="myFile2" runat="server"/><br/>
<input type="file" name="myFile3" runat="server"/><br/>
<input type="submit" value="submit" name="mySubmit" /><br/>
<br/>
<fup:FileUploadProgress ID="FileUploadProgress1"
OnClientProgressStopped = "function(){alert('Files are uploaded to server');}"
OnClientProgressStarted = "Clear"
ShowUploadedFiles = "true"
OnClientFileRejected = "Rejected"
OnClientFileCleared = "ClearedFiles"
runat = "server"
>
<AllowedFileFormats>
<fup:Format Ext="gif" MaxByteSize="10240"/>
<fup:Format Ext="jpg" MaxByteSize="10240"/>
<fup:Format Ext="jpeg" MaxByteSize="10240"/>
<fup:Format Ext="png" MaxByteSize="10240"/>
</AllowedFileFormats>
</fup:FileUploadProgress>
<asp:Label runat="server" id="uploadedFiles" Text="" />
And here's the code-behind for it:
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
HttpFileCollection files = Page.Request.Files;
uploadedFiles.Text = "";
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
if (file.FileName.Length > 0)
{
if (uploadedFiles.Text.Length == 0)
uploadedFiles.Text += "<b>Successfully uploaded files: </b><table border=0 cellspacing=0>";
uploadedFiles.Text += "<tr><td class='option2'>" + file.FileName.Substring(file.FileName.LastIndexOf("\\") + 1) + "</td><td style='font:11px Verdana;'> " + file.ContentLength.ToString() + " bytes</td></tr>";
}
}
if (uploadedFiles.Text.Length == 0)
uploadedFiles.Text = "no files";
else
uploadedFiles.Text += "</table>";
}
}
Thanks in advance!!
Looks like it is because you are passing anything to your javascript functions. :
Here is what you have. :
OnClientProgressStarted = "Clear"
ShowUploadedFiles = "true"
OnClientFileRejected = "Rejected"
OnClientFileCleared = "ClearedFiles"
Here is what I think you should probably have. :
OnClientProgressStarted = "Clear();"
ShowUploadedFiles = "true"
OnClientFileRejected = "Rejected();"
OnClientFileCleared = "ClearedFiles();"
Also, several of those functions require parameters, which I did not list above......Hopefully this helps you.
I am facing a performance issue related to running ajax in IE (i'm using Ie8), the problem is my website working very slow in ie but it works fine in chrome, and I mean by using SLOW => slow motion . I am using divs and tables and rendering html to div using javascript, besides that I'm using ajax to call 5 different pages (handlers)
function ReceiveServerData(rValue)
{
var x = GetHash();
var feeds = JSON.parse(rValue);
var sb = new StringBuilderEx();
var length = feeds.length;
for(var i=0; i<length-1; i++)
sb.append(News(feeds[i].Id, feeds[i].Title, feeds[i].Des, feeds[i].Icon, i));
if(i == 0)
{
$('#News').html("");
$('#head').html("<i><b><center>لا يوجد اي مقالات حاليا</center></b></i>");
return;
}
$('#News').html(sb.toString());
$('#Pages').html("");
if(feeds[i].count == 1)
{
$('#head').html("");
return;
}
for(var a = 1; a <= feeds[i].count; a++)
{
if('#'+a == x || a == x)
$('#Pages').append("<button id=b" + a + " class='bt2' type='button'><span class='yt-uix-button-content'>"+ a +" </span></button> ");
else
$('#Pages').append("<button id =" + a + " Onclick=javascript:ChangeHash(" + a + ") class='bt' type='button'>"+ a +"</button> ");
$('#head').html("<i><b><center>The page has been loaded.</center></b></i>");
}
scroll(0,0);
}
function News(id, title, des, icon, i)
{
var type = "";
if(i == 0)
type = "&p=big";
return "<table style=width:100%;>" +
"<tr><td rowspan=2 style=width:10%;><img width=70 hieght=70 src="+ icon +">" +
"</td><td align=right style=width:90%;background:url(./Images/BabrBackground.gif)>" +
" <font size=3> "+ title +"</font></td></tr><tr>"+
"<td valign=top align=right> <i><font color=#5C5858>"+ des +"</font></i></td></tr></table>";
}
IE's javascript engine tends to run slower than Chrome, and from the looks of it, your loop is probably making it work harder than its suppose to.
Not knowing anything about your project or what you are trying to accomplish, why do you not just render your html on the server and post that back to the client, instead of having all that javascript build the html for you?
I don't have direct answer to your question. But you can use dynaTrace to pinpoint exact line of code which is causing the issue. For more information - http://ejohn.org/blog/deep-tracing-of-internet-explorer/
I would look at optimising the html generation - have you checked out jTemplates?
I currently use jTemplates to create content from ajax returned JSON data which is inserted into divs on the page - I have no issues with performance despite generating a considerable amount of html content - largely I suspect because jTemplates is highly optimised.
I'm writing a C# app using the WebBrowser control, and I want all content I display to come from embedded resources - not static local files, and not remote files.
Setting the initial text of the control to an embedded HTML file works great with this code inspired by this post:
browser.DocumentText=loadResourceText("myapp.index.html");
private string loadResourceText(string name)
{
Assembly assembly = Assembly.GetExecutingAssembly();
Stream stream = assembly.GetManifestResourceStream(name);
StreamReader streamReader = new StreamReader(stream);
String myText = streamReader.ReadToEnd();
return myText;
}
As good as that is, files referred to in the HTML - javascript, images like <img src="whatever.png"/> etc, don't work. I found similar questions here and here, but neither is asking exactly what I mean, namely referring to embedded resources in the exe, not files.
I tried res://... and using a <base href='..." but neither seemed to work (though I may have not got it right).
Perhaps (following my own suggestion on this question), using a little embedded C# webserver is the only way... but I would have thought there is some trick to get this going?
Thanks!
I can see three ways to get this going:
1: write the files you need to flat files in the temp area, navigate the WebBrowser to the html file, and delete them once the page has loaded
2: as you say, an embedded web-server - herhaps HttpListener - but note that this uses HTTP.SYS, and so requires admin priveleges (or you need to pre-open the port)
3: like 1, but using named-pipe server to avoid writing a file
I have to say, the first is a lot simpler and requires zero configuration.
/// Hi try this may help u.
private string CheckImages(ExtendedWebBrowser browser)
{
StringBuilder builderHTML = new StringBuilder(browser.Document.Body.Parent.OuterHtml);
ProcessURLS(browser, builderHTML, "img", "src");
ProcessURLS(browser, builderHTML, "link", "href");
// ext...
return builderHTML.ToString();
}
private static void ProcessURLS(ExtendedWebBrowser browser, StringBuilder builderHTML, string strLink, string strHref)
{
for (int k = 0; k < browser.Document.Body.Parent.GetElementsByTagName(strLink).Count; k++)
{
string strURL = browser.Document.Body.Parent.GetElementsByTagName(strLink)[k].GetAttribute(strHref);
string strOuterHTML = browser.Document.Body.Parent.GetElementsByTagName(strLink)[k].OuterHtml;
string[] strlist = strOuterHTML.Split(new string[] { " " }, StringSplitOptions.None);
StringBuilder builder = new StringBuilder();
for (int p = 0; p < strlist.Length; p++)
{
if (strlist[p].StartsWith(strHref))
builder.Append (strlist[p].Contains("http")? strlist[p] + " ":
(strURL.StartsWith("http") ? strHref + "=" + strURL + " ":
strHref + "= " + "http://xyz.com" + strURL + " " ));
else
builder.Append(strlist[p] + " ");
}
builderHTML.Replace(strOuterHTML, builder.ToString());
}
}