Currently, I am in the process of developing an image uploader feature that will enable users to upload images and set them as backgrounds for a div element. Specifically, the .mm11 class represents a post-it style card that initially does not have a background image but includes buttons for choosing and uploading files.

I have successfully managed to upload the images to a folder within my tomcat directory and display them using the following code:

<img src='uploads/<%=fileName%>' />

However, setting the uploaded picture as the background has proven to be challenging. I would greatly appreciate any guidance on this matter, as I have been grappling with it for quite some time now.

<div id="uploadsContainer" class="mm11Container" style="top:100px; left: 100px;">
            <div id="g" class="mm11 card front face">
                <form action="

                    <%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
                    <%@ page import="javax.servlet.http.*" %>
                    <%@ page import="org.apache.commons.fileupload.*" %>
                    <%@ page import="org.apache.commons.fileupload.disk.*" %>
                    <%@ page import="org.apache.commons.fileupload.servlet.*" %>
                    <%@ page import="org.apache.commons.io.output.*" %>

                    <%
                    File file ;
                    String fileName = "";
                    int maxFileSize = 5000 * 1024;
                    int maxMemSize = 5000 * 1024;
                    ServletContext context = pageContext.getServletContext();
                    String filePath = context.getInitParameter("file-upload");

                    // Verify the content type
                    String contentType = request.getContentType();

                    DiskFileItemFactory factory = new DiskFileItemFactory();
                    factory.setSizeThreshold(maxMemSize);
                    
                   
                    factory.setRepository(new File("uploads/"));

                   
                    ServletFileUpload upload = new ServletFileUpload(factory);
                    upload.setHeaderEncoding("ISO-8858-2");

                   
                    upload.setSizeMax( maxFileSize );
                    try {
                    
                    List fileItems = upload.parseRequest(request);

                    
                    Iterator iter = fileItems.iterator();

                        while ( iter.hasNext () ) {
                        FileItem fi = (FileItem)iter.next();
                        
                        if ( !fi.isFormField () ) {
                           
                            String fieldName = fi.getFieldName();
                            fileName = fi.getName();
                            
                            if( fileName.lastIndexOf("\\") >= 0 ){
                            file = new File( filePath + fileName.substring( fileName.lastIndexOf("\\"))) ;
                        }
                        else {
                            file = new File( filePath + fileName.substring(fileName.lastIndexOf("\\")+1)) ;
                        }
                        fi.write( file ) ;
                        }
                    }
                } catch(Exception ex) {
                    System.out.println(ex);
                }

                %>"
                    method="post" enctype="multipart/form-data">
                    <input class="uploads" type="file" name="file" size="50"/>
                    <input class="uploadFile" type="submit" value="Upload File"/>
                    <script type="text/javascript">
                     
                        $('.mm11').css('background-image', 'uploads/<%=fileName%>');
                        alert("here filename = "+'uploads/<%=fileName%>');
                    </script>
                    
                </form>
            </div>
        </div>

Another attempt involved using AJAX by replacing the script tags with the following code:

var ajx=new XMLHttpRequest();


ajx.onreadystatechange=function()
{
  if (ajx.readyState==4 && ajx.status==200)
  {
     $("#g").css('background-image', 'uploads/<%=fileName%>');
  }
}
ajx.open("GET","index.jsp",true);
ajx.send();

Unfortunately, this approach did not yield the desired results. To verify that I can access the div element correctly, I tested it by adding the following line of code:

$("#g").empty().css('background-image', 'uploads/<%=fileName%>');

Surprisingly, this command cleared the div, showcasing that the system recognizes the element. So why isn't the background image being set?

Additionally, there seems to be a related issue where including the line:

if (contentType.indexOf("multipart/form-data") >= 0) 

(which is currently commented out) causes an alert to appear when visiting the page for the first time with the fileName set to the last uploaded file. However, when included, it leads to a Null Pointer Exception due to contentType being null. Any insights into this matter would be much appreciated.