title: upload image with imagename using jquery file upload
body: <p>I'm using <a href="http://www.phpletter.com/Our-Projects/AjaxFileUpload/" rel="nofollow">AjaxFileUpload</a> for uploading a file with some data (inputbox). Whenever I'm trying to upload the file, it shows <strong>File Uploading...</strong> and then gets stuck for a while. I checked my database, but found there was no effect on it.</p>
  
  <p>Below is what I've done so far.</p>
  
  <p><strong>index.jsp</strong></p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd"&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Ajax File Upload&lt;/title&gt;
          &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="ajaxfileupload.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $("#login_frm").submit(function(){
                      //remove previous class and add new "myinfo" class
                      // e.preventDefault();
  
                  $("#msgbox1").removeClass().addClass('myinfo').text('Uploading .... ').fadeIn(1000);
                  $.ajaxFileUpload({
                      url :'AddPhoto',
                      secureuri:false,
                      fileElementId:'image',
                      dataType: 'json',
                      success: function(msg){
                        //   alert(msg.MSG)
                          $("#msgbox1").removeClass().addClass('myinfo').text(msg.MSG).fadeIn(1000);
                          if(msg.MSG=="Image Successfully Uploaded!!")
                          {
                              document.getElementById("image").disabled="disabled";
                          }
                      }
                  });
  
                  return false;
              });
  
          });
  
      &lt;/script&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="login_style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form name="login_frm" id="login_frm" action="" method="post"&gt;
          &lt;div id="login_box"&gt;
              &lt;div id="login_header"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Citizen Login &lt;/div&gt;
              &lt;div id="form_val" style="background-color:black"&gt;
                  &lt;div class="label"&gt;Image Name :&lt;/div&gt;
                  &lt;div class="control"&gt;&lt;input type="text" name="imgname" id="imgname"/&gt;&lt;/div&gt;
                  &lt;div style="clear:both;height:0px;"&gt;&lt;/div&gt;
                  &lt;div id="msgbox"&gt;&lt;/div&gt;
                  &lt;div class="label"&gt;Photograph :&lt;/div&gt;
                  &lt;div class="control"&gt;&lt;input type="file" name="image" id="image"/&gt;&lt;/div&gt;
                  &lt;div style="clear:both;height:0px;"&gt;&lt;/div&gt;
                  &lt;div id="msgbox1"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="login_footer"&gt;
                  &lt;label&gt;
                      &lt;input type="submit" name="upload" id="upload" value="Upload" class="send_button" /&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>AddPhoto.java</strong></p>
  
  <pre><code>package fileupload;
  
  import java.io.IOException;
  import java.io.PrintWriter;
  import java.sql.Connection;
  import java.sql.DriverManager;
  import java.sql.PreparedStatement;
  import java.util.List;
  import javax.servlet.ServletException;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import org.apache.commons.fileupload.FileItem;
  import org.apache.commons.fileupload.disk.DiskFileItemFactory;
  import org.apache.commons.fileupload.servlet.ServletFileUpload;
  
  public class AddPhoto extends HttpServlet {
  
      protected void doPost(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
          response.setContentType("text/html;charset=UTF-8");
          PrintWriter out = response.getWriter();
          try {
              // Apache Commons-Fileupload library classes
              DiskFileItemFactory factory = new DiskFileItemFactory();
              ServletFileUpload sfu = new ServletFileUpload(factory);
  
              if (!ServletFileUpload.isMultipartContent(request)) {
                  out.print("{MSG:'File Not Uploaded !!'}");
                  return;
              } else {
                  // parse request
                 out.print("{MSG:'File Uploading....'}");
                 List items = sfu.parseRequest(request);             
                  FileItem file = (FileItem) items.get(0);
                  String type = file.getContentType();
                  int size = (int) (file.getSize() / 1024);
                  //String name="images";
                  String name = file.getFieldName();
                   out.println("{MSG:'Error" +size+ "'}");
                  if (name.equals("image")) {
                      if ((type.equals("image/jpeg")) &amp;&amp; ((size &lt; 201) &amp;&amp; (size &gt; 10))) {
                          Class.forName("oracle.jdbc.driver.OracleDriver");
                          Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "epolicia", "admin");
                          con.setAutoCommit(false);
                          PreparedStatement ps = con.prepareStatement("insert into images(image) values(?)");
                          ps.setBinaryStream(1, file.getInputStream(), (int) file.getSize());
                          ps.executeUpdate();
                          con.commit();
                          con.close();
                          out.println("{MSG:'ID Proof Successfully Uploaded !!'}");
  
                      } else {
                          out.print("{MSG:'ID Proof is not jpg or its more than 200kb!!'}");
                      }
                  } else {
                      out.print("{MSG:'File Not Uploaded !!'}");
                  }
              }
          } catch (Exception ex) {
              out.println("{MSG:'Error" + ex.getMessage() + "'}");
          }
      }
  }
  </code></pre>