一.引入部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
二.<body>部分
<img src="images/nophoto.jpg" id="picture" width="160px" height="200px"/>
<input type="file" id="touxiang" name="photo" size="10" onchange="changImg()"/>
注意：使用AjaxFileUpload插件上传文件可不需要form
<form name="form" action="" method="POST" enctype="multipart/form-data">
……相关html代码……
</form>
三.js部分
function changImg(){
$.ajaxFileUpload
(
{
url:'XXX.action', //上传文件的服务端
secureuri:false, //是否启用安全提交
dataType: 'text', //数据类型
fileElementId:'touxiang', //表示文件域ID
//提交成功后处理函数 html为返回值，status为执行的状态
success: function(html,status)
{
},
//提交失败处理函数
error: function (html,status,e)
{
}
}
)
}
四.原理
利用jQuery的选择器获得file文件上传框中的文件路径值，然后动态的创建一个iframe，并在里面建立一个新的file 文件框，提供post方式提交到后台。最后，返回结果到前台。
五.总结
使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用，由于其简单易用，因些这个插件相比其它文件上传插件使用人数最多，非常值得推荐。
7款基于JavaScript和AJAX的文件上传插件，这些插件基本上都能实现以下功能：多文件上传，拖拽 *** 作，实时上传进度，自定义上传限制
1. jQuery File Upload
具有多文件上传、拖拽、进度条和图像预览功能的文件上传插件，支持跨域、分块、暂停恢复和客户端图像缩放。可与任何服务端平台（如PHP、Python、Ruby on Rails、Java、Node.js、Go等）一起使用，支持标准的HTML表单文件上传。
2. Pixelcone Fileuploader
使用HTML5 API的jQuery文件上传插件，支持AJAX上传和拖拽 *** 作，以及针对老版本浏览器的iframe上传部件。有多种形式来实现多文件上传，每种形式由单一的上传脚本来控制。
3. Ajax Upload
该插件使用XHR来上传多个文件，支持拖拽 *** 作，可以在FF3.6+、Safari4+、Chrome等浏览器中完美运行。
4. Plupload
这是一个针对CMS或类似系统的、高度可用的上传插件。支持分块、拖拽、图像缩放、限制文件大小、显示上传进度等。
5. Uploadify
Uploadify是一个jQuery插件，帮助你在网站中轻松添加多文件上传功能，提供了两个版本（HTML5、Flash）。支持多文件上传、拖拽、实时进度显示，提供了大量的定制功能。
6. Ajax File Upload
该插件是Ajaxupload插件的修改版本，不具备HTML5功能。
7. jQuery FileDrop
该插件使用HTML5 API，允许用户从桌面拖动多个文件到浏览器中，并上传每个文件到用户指定的URL。该插件使用HTML5 FileReader()来读取文件数据。
JSP页面中引入的script代码<script>
function
ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show()
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide()
})//文件上传完成将图片隐藏起来
$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'imgfile',//文件上传空间的id属性
<input
type="file"
id="imgfile"
name="file"
/>
dataType:
'json',//返回值类型
一般设置为json
success:
function
(data,
status)
//服务器成功响应处理函数
{
alert(data.message)//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
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>
struts.xml配置文件中的配置方法：
<struts>
<package
name="struts2"
extends="json-default">
<action
name="AjaxImageUploadAction"
class="com.test.action.ImageUploadAction">
<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
ImageUploadAction.action
package
com.test.action
import
java.io.File
import
java.io.FileInputStream
import
java.io.FileOutputStream
import
java.util.Arrays
import
org.apache.struts2.ServletActionContext
import
com.opensymphony.xwork2.ActionSupport
@SuppressWarnings("serial")
public
class
ImageUploadAction
extends
ActionSupport
{
private
File
imgfile
private
String
imgfileFileName
private
String
imgfileFileContentType
private
String
message
=
"你已成功上传文件"
public
File
getImgfile()
{
return
imgfile
}
public
void
setImgfile(File
imgfile)
{
this.imgfile
=
imgfile
}
public
String
getImgfileFileName()
{
return
imgfileFileName
}
public
void
setImgfileFileName(String
imgfileFileName)
{
this.imgfileFileName
=
imgfileFileName
}
public
String
getImgfileFileContentType()
{
return
imgfileFileContentType
}
public
void
setImgfileFileContentType(String
imgfileFileContentType)
{
this.imgfileFileContentType
=
imgfileFileContentType
}
public
String
getMessage()
{
return
message
}
public
void
setMessage(String
message)
{
this.message
=
message
}
@SuppressWarnings("deprecation")
public
String
execute()
throws
Exception
{
String
path
=
ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload")
String[]
imgTypes
=
new
String[]
{
"gif",
"jpg",
"jpeg",
"png","bmp"
}
try
{
File
f
=
this.getImgfile()
String
fileExt
=
this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".")
+
1).toLowerCase()
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上传的文件格式不允许!!!"
return
ERROR
}*/
/**
*
检测上传文件的扩展名是否合法
*
*/
if
(!Arrays.<String>
asList(imgTypes).contains(fileExt))
{
message="只能上传
gif,jpg,jpeg,png,bmp等格式的文件!"
return
ERROR
}
FileInputStream
inputStream
=
new
FileInputStream(f)
FileOutputStream
outputStream
=
new
FileOutputStream(path
+
"/"+
this.getImgfileFileName())
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
}
}
转载，仅供参考。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）