多文件上传ajax jquery

jquery的ajaxSubmit()和多文件上传

<%@ 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:  ' + 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 + ' responseText:  ' + responseText+' :'+ 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>

原文地址:https://www.cnblogs.com/ken-admin/p/5826626.html