一、jsp中使用jquery的ajaxfileupload插件怎么实现异步上传
ajaxfileupload实现异步上传的完整例子：
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;
}
}
二、java接收ajax传递过来的图片参数图片参数
SpringMVC上传首先需要在配置文件中配置文件解析器
<beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<propertyname="defaultEncoding"value="UTF-8"/>
<!--指定所上传文件的总大小不能超过200KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和-->
<propertyname="maxUploadSize"value="200000"/>
</bean>
提交的form表单中需要包含enctype="multipart/form-data"
加上enctype后,Spring MVC的前端控制器会判断是否是文件上传,自动转换的
后台使用MultipartFile对象即可接收
可以直接form表单提交或者异步上传文件
三、jquery treeview 怎么用ajax 动态加载
//将TreeView封装成插件的方式
(function($){
$.fn.extend({
TreeView:function(obj){
if($.type(obj)==="object"){
if(obj["Default"]!=undefined){
var objDiv=$("<div></div>");
$.each(obj["Default"],function(k,v){
var nodes=$("<div></div>").addClass("nodes");
var parentNodes=$("<div></div>").addClass("parentNodes");
var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
var topplus=$("<img
src=\"image/topplus.gif\"/>").addClass("plus").css({"width":"9px","height":"9px","margin":"5px
4px 8px 0"});;
var checkbox=$("<input
type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
var a=$("<span
class=\"text\"><a href=\""+v["url"]+"\">"+v["name"]+"</a></span>").addClass("text");
parentNodes.append(topplus.attr("id",v["ajaxData"])).append(checkbox).append(a);
nodes.append(parentNodes).append(childNodes);
objDiv.append(nodes);
});
$(this).append(objDiv.html());
}else{
return false;
}
//对TreeView里面所以的收缩的图标进行监听
$(this).delegate(".plus","click",function(){
var childNodes=$(this).parent().next(),thisObj=$(this);
if(childNodes.css("display")!="none"){
TreeFn.childHide(thisObj);
}else{
if(childNodes.html()==""){
TreeFn.GetData(thisObj,obj);
}else{
TreeFn.childShow(thisObj);
}
}
//同时对checkbox也进行监听
}).delegate(".checkbox","click",function(){
var checkbox=$(this),childNodes=$(this).parent().next();
if(checkbox.attr("checked")){
childNodes.find(".checkbox").attr("checked",true);
}else{
childNodes.find(".checkbox").attr("checked",false);
}
})
}else{
alert("111");
}
return this;
}
});
})(jQuery);
//这里定义一个对象，把我们用的到的方法封装以来
var TreeFn={
//将ajax动态加载好的子节点展开出来
childShow:function(thisObj){
var childNodes=thisObj.parent().next();
childNodes.show();
if(thisObj.attr("src").indexOf("top")>=0){
thisObj.attr("src","image/topminus.gif");
}else if(thisObj.attr("src").indexOf("end")>=0){
thisObj.attr("src","image/endminus.gif");
}else{
thisObj.attr("src","image/centerminus.gif");
}
},
//将子节点收缩
childHide:function(thisObj){
var childNodes=thisObj.parent().next();
childNodes.hide();
if(thisObj.attr("src").indexOf("top")>=0){
thisObj.attr("src","image/topplus.gif");
}else if(thisObj.attr("src").indexOf("end")>=0){
thisObj.attr("src","image/endplus.gif");
}else{
thisObj.attr("src","image/centerplus.gif");
}
},
//利用父节点元素的个数，构造子节点元素的个数
lineImage:function(thisobj){
var objDiv=$("<div></div>");
var p=thisobj.parent().children();
p.each(function(index){
if(index<p.size()-3){
var line=$("<img
src=\"image/line.gif\"/>").addClass("line");
var nul=$("<img
src=\"image/null.gif\"/>").addClass("null");
if($(this).attr("class")=="line"||$(this).attr("class")=="join"||$(this).attr("src").indexOf("center")>=0){
objDiv.append(line);
}else{
objDiv.append(nul);
}
}
});
return objDiv;
},
//解析ajax过来的json数据，将其构造成子节点
AnalyJSON:function(json,thisObj,obj){
var objDiv=$("<div></div>");
$.each(json,function(key,value){
var nodes=$("<div></div>").addClass("nodes");
var parentNodes=$("<div></div>").addClass("parentNodes");
var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
var line=$("<img
src=\"image/line.gif\"/>").addClass("line");
var topplus=$("<img
src=\"image/topplus.gif.gif\"/>").addClass("plus");
var centerplus=$("<img
src=\"image/centerplus.gif\"/>").addClass("plus").attr("id",value["id"]);
var endplus=$("<img
src=\"image/endplus.gif\"/>").addClass("plus").attr("id",value["id"]);
var join=$("<img
src=\"image/join.gif\"/>").addClass("join");
var lineh=$("<img
src=\"image/lineh.gif\"/>").addClass("end");
var end=$("<img
src=\"image/end.gif\"/>").addClass("end");
var checkbox=$("<input
type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
var a=$("<span
class=\"text\"><a href=\""+value["url"]+"\">"+value["name"]+"</a></span>").addClass("text");
var commone=TreeFn.lineImage(thisObj);
if(value["hasChild"]=="1"){
if(value["last"]==undefined||value["last"]!="1")
{
parentNodes.append(commone.html()).append(join).append(centerplus);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}else{
parentNodes.append(commone.html()).append(end).append(endplus);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}
nodes.append(parentNodes);
nodes.append(childNodes);
objDiv.append(nodes);
}else{
if(value["last"]==undefined||value["last"]!="1"){
parentNodes.append(commone.html()).append(join).append(lineh);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}else{
parentNodes.append(commone.html()).append(end).append(lineh);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}
nodes.append(parentNodes);
nodes.append(childNodes);
objDiv.append(nodes);
}
});
return objDiv;
},
//点击父节点展开，进获取下面的子节点数据
GetData:function(thisObj,obj){
$.ajax({
type:"GET",
cache:false,
async:false,
url:obj["ajaxUrl"],
dataType:"text",
data:{Key:thisObj.attr("id")},
beforeSend:function(){
thisObj.parent().append("<img
src=\"image/Loading.gif\" class=\"load\"/>");
},
success:function(json){
thisObj.parent().next().html("").append(TreeFn.AnalyJSON($.parseJSON(json),thisObj,obj).html());
TreeFn.childShow(thisObj);
},
complete:function(){
thisObj.parent().children().remove(".load");
}
});
}
};
文章到此结束，如果本次分享的jQuery插件之ajaxFileUpload和jsp中使用jquery的ajaxfileupload插件怎么实现异步上传的问题解决了您的问题，那么我们由衷的感到高兴！
