jquery中的ajax异步上传
程序员文章站
2022-06-14 15:16:24
找了好久终于在网上找到了ajax异步上传文件的方法，不过网上大多数是php的 ，我改为struts2写的 大同小异，希望对学习java的人有一定的帮助。我上传的是音乐文件。...
找了好久终于在网上找到了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上传后台代码*************************************
package action;
import java.io.file;
import java.io.ioexception;
import java.io.outputstream;
import org.apache.commons.io.fileutils;
import org.apache.struts2.json.annotations.json;
import org.farng.mp3.mp3file;
import org.farng.mp3.tagexception;
import org.farng.mp3.id3.abstractid3v2;
import org.farng.mp3.id3.id3v1;
import org.farng.mp3.lyrics3.abstractlyrics3;
import com.base.baseaction;
import com.opensymphony.xwork2.actionsupport;
public class upload extends baseaction {
private static final long serialversionuid = -4848248679889814408l;
private string filename;
private file upload;
public file getupload() {
return upload;
}
public void setupload(file upload) {
this.upload = upload;
}
public void setuploadfilename(string filename) {
this.filename = filename;
}
/*
* 歌曲上传 上传操作
*/
public void uploadaction() throws ioexception {
system.out.println("进入了该方法！");
string targetdirectory = "d:\\upload";
system.out.println(upload);
file target = new file(targetdirectory, filename);
fileutils.copyfile(upload, target);
string path = targetdirectory+"\\"+filename;
try {
mp3file file = new mp3file(path);//1,lyrics
abstractid3v2 id3v2 = file.getid3v2tag();
id3v1 id3v1 = file.getid3v1tag();
string ss = "";
if (id3v2 != null) {
system.out.println("id3v2");
ss = id3v2.getalbumtitle()+";"+id3v2.getsongtitle()+";"+id3v2.getleadartist();
//string str = "{'msg','"+ss+"'}";
string str = ss;
output(str);
system.out.println(id3v2.getalbumtitle());//专辑名
system.out.println(id3v2.getsongtitle());//歌曲名
system.out.println(id3v2.getleadartist());//歌手
} else {
system.out.println("id3v1");
system.out.println(id3v1.getalbumtitle());
system.out.println(id3v1.getsongtitle());
system.out.println(id3v1.getleadartist());
}
abstractlyrics3 lrc3tag = file.getlyrics3tag();
if (lrc3tag != null) {
string lyrics = lrc3tag.getsonglyric();
system.out.println(lyrics);
}
} catch (ioexception e) {
e.printstacktrace();
} catch (tagexception e) {
e.printstacktrace();
}
system.out.println("over");
}
}
struts.xml配置文件*********************************
<?xml version="1.0" encoding="utf-8" ?>
<!doctype struts public
"-//apache software foundation//dtd struts configuration 2.0//en"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="utf-8"/>
//设置上传文件最大量
<constant name="struts.multipart.maxsize" value="10485760"/>
<package name="upload" namespace="/" extends="struts-default" >
<action name="uploadaction" class="action.upload" method="uploadaction">
<result name="success">/index.jsp</result>
</action>
</package>
</struts>
后来经过调试，发现火狐和ie不兼容 导致无执行争取结果，所以我上传ajaxfileupload.js 我修改了源码
以上是本文给大家介绍jquery中的ajax异步上传，希望对大家有所帮助。