Html FileUpload

Set the renderFiles property of the jqxFileUpload. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div style="margin-bottom: 20px; font-style: italic;">Note: to be able to upload a file you would have to set the property <strong>uploadUrl</strong> to point to a file hosted on your server, which handles the upload process.</div>
<div id="jqxFileUpload"></div>

JavaScript

$('#jqxFileUpload').jqxFileUpload({
    theme: 'energyblue',
    width: 300,
    uploadUrl: 'upload.php',
    fileInputName: 'fileInput',
    renderFiles: function (fileName) {
        var stopIndex = fileName.indexOf('.');
        var name = fileName.slice(0, stopIndex);
        var extension = fileName.slice(stopIndex);

        return '<div>' + name + '<strong>' + extension + '</strong></div>';
    }
});