jquery之ajaxfileupload异步上传插件
由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用jquery ajax file uploader这个下载地址：https://www.phpletter.com/download_project_version.php?version_id=6
服务器端采用struts2来处理文件上传。
所需环境：
jquery.js
ajaxfileupload.js
struts2所依赖的jar包
及struts2-json-plugin-2.1.8.1.jar
编写文件上传的action
代码 代码如下:
package com.ajaxfile.action;
import java.io.file;
import java.io.fileinputstream;
import java.io.fileoutputstream;
import org.apache.struts2.servletactioncontext;
import com.opensymphony.xwork2.actionsupport;
@suppresswarnings("serial")
public class fileaction extends actionsupport {
private file file;
private string filefilename;
private string filefilecontenttype;
private string message = "你已成功上传文件";
public string getmessage() {
return message;
}
public void setmessage(string message) {
this.message = message;
}
public file getfile() {
return file;
}
public void setfile(file file) {
this.file = file;
}
public string getfilefilename() {
return filefilename;
}
public void setfilefilename(string filefilename) {
this.filefilename = filefilename;
}
public string getfilefilecontenttype() {
return filefilecontenttype;
}
public void setfilefilecontenttype(string filefilecontenttype) {
this.filefilecontenttype = filefilecontenttype;
}
@suppresswarnings("deprecation")
@override
public string execute() throws exception {
string path = servletactioncontext.getrequest().getrealpath("/upload");
try {
file f = this.getfile();
if(this.getfilefilename().endswith(".exe")){
message="对不起,你上传的文件格式不允许!!!";
return error;
}
fileinputstream inputstream = new fileinputstream(f);
fileoutputstream outputstream = new fileoutputstream(path + "/"+ this.getfilefilename());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputstream.read(buf)) != -1) {
outputstream.write(buf, 0, length);
}
inputstream.close();
outputstream.flush();
} catch (exception e) {
e.printstacktrace();
message = "对不起,文件上传失败了!!!!";
}
return success;
}
}
struts.xml
代码 代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<!doctype struts public "-//apache software foundation//dtd struts configuration 2.1//en" "https://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="struts2" extends="json-default">
<action name="fileuploadaction" class="com.ajaxfile.action.fileaction">
<result type="json" name="success">
<param name="contenttype">
text/html
</param>
</result>
<result type="json" name="error">
<param name="contenttype">
text/html
</param>
</result>
</action>
</package>
</struts>
注意结合action观察struts.xml中result的配置。
contenttype参数是一定要有的，否则总是提示将返回的json结果另存为文件，不会交给ajaxfileupload处理。这是因为struts2 json plugin默认的contenttype为application/json，而ajaxfileupload则要求为text/html。
文件上传的页面
代码 代码如下:
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "https://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxfileupload()
{
$("#loading")
.ajaxstart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxcomplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来
$.ajaxfileupload
(
{
url:'fileuploadaction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileelementid:'file',//文件上传空间的id属性 <input type="file" id="file" name="file" />
datatype: 'json',//返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<img src="loading.gif" id="loading" style="display: none;">
<input type="file" id="file" name="file" />
<br />
<input type="button" value="上传" onclick="return ajaxfileupload();">
</body>
</html>
注意观察<body>中的代码，并没有form表单。只是在按钮点击的时候触发ajaxfileupload()方法。需要注意的是js文件引入的先后顺序，ajaxfileupload.js依赖于jquery因此你知道的。
上一篇： 放久的银耳过期了还能吃吗？
下一篇： html常见标签和属性
推荐阅读