Click here to Skip to main content
14,300,872 members
Rate this:
Please Sign up or sign in to vote.
I have a jsp page here, the upload will show up based on one of the dropdown value. till there its working fine. I have used submit action for upload here. but also tried Ajax call etc...nothing working :( ideal goal is to upload file without submit action. Kindly assist how we can achieve this. it would be great help.Thanks


What I have tried:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<style type="text/css">
body {
    background-image:
        url('https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');
}
</style>

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>First JSP Servlet Example</title>
</head>
<body>
    <div align="center" style="margin-top: 50px;">

        <form action="FirstwebServlet">
        <br> Please select the option
            : <select required="required" name="sel" id="selType">
                <option value="None">Choose from the list</option>
                <option value="MyReport">MyReport</option>
                <option value="Myview">Myview</option>
                <option value="mycustom">mycustom</option>

            </select> <br>


            <form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
            <div id="otherType" style="display: none;">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
    </div>
</form>


            <input type="submit" value="submit">
        </form>

    </div>
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
    $(function() {
        $('#upload-form').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn't upload file");
            }
        });
    });
</script>
    <script
        src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script
        src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    ‌​
    <script>
        $('#selType').change(function(){
               selection = $(this).val();    
               switch(selection)
               { 
                   case 'Mycustomtemplate':
                       $('#otherType').show();
                       break;
                   default:
                       $('#otherType').hide();
                       break;
               }
            });
        </script>
</body>
</html>
Posted
Updated 11-Sep-19 5:37am
Comments
Member 12974741 11-Sep-19 9:15am
   
Sorry i am not getting. May i know what is your recommendation. i tried in google fu... tried few didnt work with jsp. thats why raised a question here thinking i can get some insights. Thanks

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Well for starters you have invalid HTML; form nesting is generally prohibited
<form action="FirstwebServlet">
	<br> Please select the option:
	<select required="required" name="sel" id="selType">
		<option value="None">Choose from the list</option>
		<option value="MyReport">MyReport</option>
		<option value="Myview">Myview</option>
		<option value="mycustom">mycustom</option>
	</select>
	<br>
	<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
		<div id="otherType" style="display: none;">
			<input type="file" id="file" name="file1" />
			<span id="upload-error" class="error">${uploadError}</span>
			<input type="submit" id="upload-button" value="upload" />
		</div>
	</form>
	<input type="submit" value="submit">
</form>
And then you basically are redefining jQuery after you've called descendant libraries and defined functions
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
$(function() {
	$('#upload-form').ajaxForm({
		success: function(msg) { alert("File has been uploaded successfully"); }
		, error: function(msg) { $("#upload-error").text("Couldn't upload file"); }
	});
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
My recommendations would be to:
1. Write valid HTML
2. Call only one or the other jQuery libraries (I'd do the CDN over the local)
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100