Jsp+ajax to implement the method of no refreshing upload file _ajax related

Source: Internet
Author: User

This article illustrates the method of Jsp+ajax to upload files without refreshing. Share to everyone for your reference, specific as follows:

List page: selectaddress.jsp
JS Page: Ajax_edit.js
JSP processing page: editaddress.jsp
Upload Tool class: Uploadutil.java

Thought: Because of security problems, JavaScript can not manipulate the file, resulting in Ajax can not dynamically upload files, so chose the IFRAME,

The list page submits form forms to an implicit iframe, setting the properties of the form

Copy Code code as follows:
Enctype= ' multipart/form-data ' target= ' hidden_frame '

Then, after processing the page processing, it returns
Copy Code code as follows:
Out.println (' <script>parent.callback (' return value ') </script> ');

List page to perform a callback function!

selectaddress.jsp

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <%@ page import=" com.wap3.navigater.service.* "%> <%@ page import=" com.wap3.navigater.dao.* "%> <%@ page import=" com.wap3.navigater.pojo.* "%> <%@ page import=" com.wap3.navigater.util.* "%> <%@ page import=" java.util.* "%> <%@ page import=" java.text.* "%> <!
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

Editaddress.jsp

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <%@ page import=" com.wap3.navigater.util.* "%> <%@ page import=" com.wap3.navigater.service.* "%> <%@ page import=" com.wap3.navigater.pojo.* "%> <%@ page import=" com.wap3.navigater.dao.* "%> <%@ page import=" java.util.* "%> <%@ page import=" java.text.* "%> <% Str
  ing target = parameterutil.getstringparameter (request, "target", "");
  String action = Parameterutil.getstringparameter (Request, Action, ""); if (! "".
   Equals (target) && target!= null && "edit". Equals (action) {int CategoryID = 0;
   CategoryDao CategoryDao = null;
   int urlid=0,status=0,sequence=0,filter=0;
   String Sitename=null,alias=null,texturl=null,imageurl=null,description=null,mobile=null;
   Date Validbegintime=null,validendtime=null;
    if ("ImageUrl". Equals (target)) {System.out.println ("picture upload");
    Uploadutil.upload (request, response); String Imageurlpath = (String) Request.getattribute ("Imageurlpath");
    Urlid = Integer.parseint ((String) Request.getattribute ("Urlid"));
   ImageUrl = (String) request.getattribute ("Imageurlpath"); }else{if ("CategoryName". Equals (target)) {String CategoryName = parameterutil.getstringparameter (Request, "Categor
     Yname "," ");
      Category Category = new Category ();
     Category.setcategoryname (CategoryName);
     CategoryDao = new Ibatiscategorydao ();
      Category Category2 = Categorydao.selectcategorybye (Category). Get (0);
    CategoryID = Category2.getcategoryid ();
    }else{CategoryID = Parameterutil.getintparameter (Request, "CategoryID", 0);
     } Urlid = Parameterutil.getintparameter (Request, "Urlid", 0);
     SiteName = parameterutil.getstringparameter (Request, "SiteName", "");
     Alias = Parameterutil.getstringparameter (Request, "Alias", "");
     Texturl = Parameterutil.getstringparameter (Request, "Texturl", ""); ImageUrl = Parameterutil.getstringparameter (Request, "ImageUrl", "");
     Description = Parameterutil.getstringparameter (Request, "description", "");
     Status = Parameterutil.getintparameter (Request, "status", 0);
     sequence = Parameterutil.getintparameter (request, "sequence", 0);
     Filter = Parameterutil.getintparameter (Request, "filter", 0);
     Mobile = Parameterutil.getstringparameter (Request, "mobile", "");
     Validbegintime = Parameterutil.getdateparameter (Request, "validbegintime");
   Validendtime = Parameterutil.getdateparameter (Request, "validendtime");
   Calendar beginday=calendar.getinstance ();
    Friendurl Friendurl = new Friendurl ();
    Friendurl.seturlid (Urlid);
    Friendurl.setsitename (sitename);
    Friendurl.setdescription (description);
    Friendurl.settexturl (Texturl);
    Friendurl.setimageurl (ImageUrl);
    Friendurl.setalias (alias);
    Friendurl.setsequence (sequence);
    Friendurl.setmobile (mobile);
    Friendurl.setcategoryid (CategoryID);
    Friendurl.setstatus (status); Friendurl.setvalidbegintime (ValidbegintiME);
    Friendurl.setvalidendtime (Validendtime);
   Friendurl.setfilter (filter);
   Friendurldao Friendurldao = new Ibatisfriendurldao ();
   FRIENDURLDAO.UPDATEFRIENDURLBYP (Friendurl);
   Friendurl friendurl2 = Friendurldao.selectfriendurlbye (Friendurl). Get (0);
    if (friendurl2!= null) {String methodname = ' Get ' + target.substring (0,1). toUpperCase () +target.substring (1);
     if (Target.endswith ("Time")) {SimpleDateFormat df = new SimpleDateFormat ("Yyyy-mm-dd"); Out.println (Timeutil.date2str ((Date) (Friendurl2.getclass (). GetMethod (Methodname,new class[]{}). Invoke (
    Friendurl2,new object[]{}))); }else if ("CategoryName". Equals (target)) {out.println (Categorydao.selectcategorybyp (Friendurl2.getcategoryid ()).
    Getcategoryname ()); }else if ("ImageUrl". Equals (target)) {//No refresh key steps, let the parent body of the IFRAME execute callback this function out.println ("<script>parent.") Callback (' "+friendurl2.getclass (). GetMethod (Methodname,new class[]{}). Invoke (Friendurl2,new object[]{}) +" ') </ Script> ");
    }else{out.println (Friendurl2.getclass (). GetMethod (Methodname,new class[]{}). Invoke (Friendurl2,new Object[]{}));
   }}else{out.println ("update failed");

 }}%>

Ajax_edit.js

(function () {$.fn.extend ({ajax_edit:function (str,oldvalue) {return This.each (function () {$this = $ (this);
     var id;
     var nameId = $this. attr ("Class"). Split ("") [1]; var idname = $this. Parents ("Tr.package_list"). Find ("Td:first-child:input[type=checkbox"). attr ("Class"). Split ("")
     [1]; id = $this. Siblings ("."
     +idname+ "_td"). Find ("Input"). Val (); if (nameId = = "CategoryName" && str = "editaddress.jsp") {$this. Load ("categorylist.jsp", {' OldValue '): OldValue
     , ' Urlid ': id}); }else{$this. HTML ("<form id= ' selectaddressform ' ><input type= ' hidden ' name= '" +idname+ "' value= '" +id+ "'/>") <input type= ' hidden ' name= ' target ' value= ' "+nameid+" '/><input type= ' text ' name= ' "+nameid+" ' value= ' "+
      Oldvalue+ "'/></form>");
     $this. Find (": Input:last"). focus (); }}), Ajax_edit_img:function (str,oldvalue) {//Handle picture upload Ajax key step form target= ' Hidden_frame ' submitted to ID hidden_frame
 iframe inside return This.each (function () {   var $this = $ (this);
    var nameId = $this. attr ("Class"). Split ("") [1]; var idname = $this. Parents ("Tr.package_list"). Find ("Td:first-child:input[type=checkbox"). attr ("Class"). Split ("")
    [1]; var id = $this. Siblings ("."
    +idname+ "_td"). Find ("Input"). Val (); var $imgForm = $ ("<form id= ' selectaddressform_img ' action= ' Editaddress.jsp?action=edit&target=imageurl ') Method= ' post ' enctype= ' multipart/form-data ' target= ' hidden_frame ' ><input type= ' hidden ' name= ' "+idName+ '" Value= ' "+id+" '/><input type= ' file ' name= ' "+nameid+" '/><input type= ' button ' class= ' Cancel ' value= ' Cancel '/
    ><input type= ' button ' class= ' OK ' value= ' upload '/></form> ');
    $this. HTML ($imgForm);
    $this. Find (": Input:last"). focus ();
    $imgForm. Find (": Input[type=file]"). Bind (' Change ', function () {$ (this). Filetypejudge ("photo");
     $imgForm. Find (": Input.ok"). Bind (' click ', function () {var $button = $ (this);
      if ($imgForm. Find (": Input[type=file]"). val () = = ') {Alert ("Please upload the picture!")
      ");
     return false;
     $button. attr ("Disabled", true);
    $ ("#selectaddressForm_img"). Submit ();
    $imgForm. Find (": Input.cancel"). Bind (' click ', Function () {$ (this). Parents (". Edit_img"). HTML (oldValue);
   });
     }), Ajax_handle:function (str,oldvalue) {return This.each (function () {var $this = $ (this);
      settimeout (function () {if (!$ ("div"). Hasclass ("Datepick-control") | |!$ ("div. Datepick-control"). Is (": visible")) { if (OldValue!= $this. Val () && $this. Val ()!= "") {$.post str,$ ("#selectaddressForm"). Seriali
          Ze (), function (data) {$this. Parents (". Edit"). Text (Data.trim ()). CSS ("Color", "red");
      })}else{$this. Parents (". Edit"). Text (OldValue);
    }}},1000);

 })}}) (JQuery)

Hopefully this article will help you with Ajax programming.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.