jquery中的ajax异步上传

2024-09-01 08:28:28

字体：大中小

来源：转载

供稿：网友

找了好久终于在网上找到了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上传后台代码*************************************

上一篇：Ajax带提示的验证表单实例

下一篇：Ajax实现弹出式无刷新城市选择功能代码