WebApps learnings: Servlets and JSPs: Showing an Image/Icon in place of html input type file Browse button

When we use html input type file component, we get a button and file text in the page, like below:

To show an icon/button/image in place of above content, we can use javascript and css.
Using CSS we show image and using javascript, we submit the form:

Files:

upload.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/css/fileUpload.css"/>
<script type="text/javascript" src="resources/js/fileUpload.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload File Demo</title>
</head>
<body>
    <form>
        <div class="upload">
            <input type="file" name="datafile"
                onchange="fileUpload(this.form,'upload.file','upload'); return false;" /></br>
        </div>
    </form>
</body>
</html>

fileUpload.css:
div.upload {
    background: url('../images/images.jpeg');
    background-repeat: no-repeat;
    background-size:50px 50px;
}

div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

fileUpload.js
function fileUpload(form, action_url, div_id) {
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "upload_iframe");
    iframe.setAttribute("name", "upload_iframe");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function() {

        if (iframeId.detachEvent)
            iframeId.detachEvent("onload", eventHandler);
        else
            iframeId.removeEventListener("load", eventHandler, false);

        // Message from server...
        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        document.getElementById(div_id).innerHTML = content;

        // Del the iframe...
        setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
    }

    if (iframeId.addEventListener)
        iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent)
        iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");

    // Submit the form...
    form.submit();
}

WebApps learnings: Servlets and JSPs

Wednesday, June 18, 2014

Showing an Image/Icon in place of html input type file Browse button

No comments:

Post a Comment