jquery的ajaxSubmit()和多文件上传

简介:               My JSP 'fileupload.jsp' starting page               $(document).

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

   

    <title>My JSP 'fileupload.jsp' starting page</title>

   

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">   

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

  </head>

  <script type="text/javascript" src="./js/jquery.js" ></script>

<script type="text/javascript" src="./js/jquery.form.js"></script>

  <script type="text/javascript">

$(document).ready(function(){

     

              

            $("#button").click(function () {

             alert("所做的批量处理操作没有成功,请重试");

            subForm();

            }); 

    });

//-------------------form---------------------------------

//表單的異步提交

var options = {

//iframe:true,

dataType:"xml", // 或'script',不能用'json',这种方式在三种浏览器中都不行,即回调函数不执行

  type:'post',

  url: "/SHOPcity/servlet/uploadTest", //http://localhost:8080/SHOPcity/fileupload.jsp

  beforeSubmit:showRequest,  // pre-submit callback

       success:showResponse,

       clearForm:true ,

       // other available options:

      // target:'#baseInfo_iframe'   // target element(s) to be updated with server response

       //resetForm: true        // reset the form after successful submit

       // $.ajax options can be used here too, for example:

       //timeout:   3000

     };

function subForm(){

alert("xxxx");

$("#myform").ajaxSubmit(options);

}

     function showRequest(formData, jqForm, options) {

  var queryString = $.param(formData);

         alert('About to submit: \n\n' + queryString);

  }

 

function showResponse(responseText, statusText)   {

var dataType;

$(responseText).find("msg").each(function() {

   var field = $(this);

    //field.attr("nub");//读取节点属性

   dataType = field.find("content").text();//读取子节点的值

  

});

          alert('status: ' + statusText + '\n\nresponseText: \n' + responseText+'\n:'+ dataType );

}

  </script>

  <body>

    jaThis is my JSP page. <br>

   

     <form name="myform" id="myform" action="./servlet/uploadTest" method="post" enctype="multipart/form-data">

File:<br>

<input type="text" name="txtlink" ><br/>

<input type="file" name="myfile1"><br>

<input type="file" name="myfile2"><br>

<input type="file" name="myfile3"><br>

<textarea name="textarea" rows="10" cols="30">  </textarea>

<br>

 

  <button type="button" id="button">提交</button>

</form>

  </body>

</html>

 

http://hi.baidu.com/zjcjava/item/1080cf4a76558907c01613f0

目录
相关文章
|
JavaScript 前端开发 PHP
jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接、或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文件上传,AjaxFileUpload文件上传插件功能斗劲稳定,今朝应用也斗劲多,简单应用实例如下: 查看AjaxFileUpload相干jQuery官方文档介绍 AjaxFileUpload JS库
1599 0
|
JavaScript 前端开发 PHP
jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
引用:http://cgxcn.blog.163.com/blog/static/1323124220095472652900/ Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接、图片或其它元素取代传统的file表单上传效果,可实现Ajax动态提...
1385 0
|
前端开发
ajax submit - jquery
function submitForm() {            var url = "/RefRoute/InsertTemplate";            //alert("submit");            var options = {               ...
587 0
|
JSON JavaScript 数据格式
ajaxSubmit插件jQuery1.4.2版JSON问题
jQuery Form 插件基于jQuery v1.4.2版返回JSON数据时一直报错;修改以下内容可恢复; 原后台输出数据格式如:{sitename:'开发者网络',siteurl:'www.
807 0
|
9月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
44 0
|
10月前
|
JavaScript
jQuery 自定义插件
jQuery 自定义插件
32 0
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
25天前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
19 1
|
27天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin