Could someone please assist me in making this jQuery script work with the CSS to create the columns like what is seen here?
Responsive Four Column Layout with Flex
The only thing I can do is get them in a row, not columns.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Load.aspx.vb" Inherits="Load" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("[id*=fuUpload]").change(function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = $("#dvPreview");
dvPreview.html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
// Here is where we check for the file size. This demo is set to 1mb.
// Change it to whatever size you need for your project.
// Change 1000 / 1000 -- to 5000 / 5000 = 5 in maxSize
const size = (file[0].size / 5000 / 5000).toFixed(2);
const theSize = size + (size > 1 ? "mb" : "kb");
var maxSize = 20 // Change this to the max allowed to upload. 1 = 1mb / 5 = 5mb / 10 = 10mb / 20 = 20mb
if (regex.test(file[0].name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var strImage = e.target.result
if (size > maxSize) {
dvPreview.append('File size is larger than the allowed size. (Fize Size =' + theSize + ') ' +
'<br />Please upload less than ' + maxSize + 'mb per image.< br /> Upload button has been diabled.' +
'<br />Please change file size to meet the requirements, <br />Refresh and Re - Upload files.')
$("#btnUpload").prop('disabled', true);
} else {
dvPreview.append('<div class="row">' +
'<div class="column">' +
'<div class="Sizes">' + theSize + '</div>' +
'<div class="ImageList"><img src="' + strImage + '"></div>' +
'</div > ' +
'</div > ');
}
}
reader.readAsDataURL(file[0]);
} else {
dvPreview.html(file[0].name + " is not a valid image file.");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
var maxWidth = 300;
if ($('Upload').width() > maxWidth) $('Upload').width(maxWidth);
});
});
</script>
<style type="text/css">
* { box-sizing: border-box; }
/* Container for flexboxes */
.row { display: flex; flex-wrap: wrap; padding-bottom: 10px; width: 250px; }
/* Create four equal columns */
.column { padding: 5px; border: 1px double #000; }
div.column:nth-of-type(1) { flex: 0.5; }
div.column:nth-of-type(2) { flex: 1; }
div.column:nth-of-type(3) { flex: 2; }
/*Add in additional columns, uncomment the below, and add more. Numbering accordingly.*/
/* div.column:nth-of-type(4){
flex: 3;
}*/
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column { flex: 50%; }
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row { flex-direction: column; }
}
</style>
</head>
<body>
<div id="Upload">
<%=Environment.MachineName%>
<form id="form1" runat="server">
1 mb file upload only!<br />
<asp:FileUpload ID="fuUpload" runat="server" multiple="multiple" /><br />
<asp:Label ID="IDLabel2" runat="server" Text="Label"></asp:Label>
<asp:Label ID="IDLabel" runat="server" Text="Label"></asp:Label>
<hr />
<div id="dvPreview">
</div>
</form>
</div>
</body>
</html>
Thanks. Wayne
