jquery中的ajax异步上传

2019-09-14 07:05:55王振洲

找了好久终于在网上找到了ajax异步上传文件的方法,不过网上大多数是php的 ,我改为struts2写的 大同小异,希望对学习java的人有一定的帮助。我上传的是音乐文件。

ajaxfileupload.js这个js文件是主要文件,一定要导入。

 jsp页面 ,其中我还做了div的隐藏*****************************

<%@ 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>Uploadify</title>
<style type="text/css">
#div1{
color: #000000; font-size: 12px; 
  border: 0px solid #74B3DC;
  color: #000;
  background: #fff;
display:none;
}
</style>
 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/ajaxfileupload.js"></script>
   <!-- 执行上传文件操作的函数 -->
   <script type="text/javascript">
     function ajaxFileUpload(){
        $.ajaxFileUpload(
          {
        url:'uploadAction.action',      //需要链接到服务器地址
        secureuri:false,
        fileElementId:'upload',           //文件选择框的id属性
        dataType: 'json',              //服务器返回的格式
        success: function (data, status)      //相当于java中try语句块的用法
        {  
        // alert(data);
          var ss =data;
         // alert(ss);
          var mp3Name = ss.split(";");
          for(var i=0; i<mp3Name.length;i++) {
           //alert(mp3Name[i]);
           $('#songName').val(mp3Name[0]);
           $('#songsiger').val(mp3Name[1]);
          }
          $('#result').html('添加成功');
        },
        error: function (data, status, e)      //相当于java中catch语句块的用法
        {
          //alert("222.");
          $('#result').html('添加失败');
        }
      }
        );
      target=document.getElementById('div1');
      if (target.style.display=="block"){
        target.style.display="none";
      } else {
        target.style.display="block";
      }
     }
   </script>
</head>
<body>
   <form method="post" action="uploadAction.action" enctype="multipart/form-data"> 
    <input type="file" id="upload" name="upload"/>
    <input type="button" value="上传文档" onclick="ajaxFileUpload()"/>
  <div id="result"></div>
    <div id="div1">
    歌曲<input type="text" id="songName" name="songName" value="">
    歌手 <input type="text" id="songsiger" name="songName" value="">
    <input type="button" value="提交文档信息" />
    </div>
  </form>
 </body>
</html>

action上传后台代码*************************************