使用jquery的ajaxfileupload.js和struts2无刷新上传文件出错
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jquery的ajaxfileupload.js和struts2无刷新上传文件出错相关的知识，希望对你有一定的参考价值。
我在SSH2的项目中使用了jquery的ajaxfileupload.js进行无刷新的文件上传操作,但是我在后台输出接收到的File对象时，却输出了为null,是什么原因呢？后台根本连接收都没有接收到，下面我将贴出关键部分代码:
html部分:
<fieldset style="margin-top:10px">
<legend>修改用户头像</legend>
<div id="id__form_modifyUserIcon" style="float:left;margin-left:20px">
<table><tr><td rowspan="2"><img src="resources/$userInfo.userIcon" width="70" height="70" id="id_userIconImg" /></td>
<td><input type="file" name="id_userIcon" id="id_userIcon" onchange='$("#id_userIconImg").attr("src", $(this).val())' /></td></tr><tr><td align="right"><input type="button" value="确定修改" id="id_submitUserIcon" /></td></tr></table></div></fieldset>
jquery部分:
$("#id_submitUserIcon").click(function(event)
return ajaxFileUpload();
);
function ajaxFileUpload()
$("#loading")
.ajaxStart(function()
$(this).show();
)//开始上传文件时显示一个图片
.ajaxComplete(function()
$(this).hide();
);//文件上传完成将图片隐藏起来
$.ajaxFileUpload
( url:'userCenter_changeMyIcon.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'id_userIcon',//文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json',//返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
//alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
//$("#uploadMeg").attr("src",data.message);
//var status = $.parseJSON(data);
//var text = $.parseJSON(data);
//alert(text.flag);
//alert(data);
$("<div style='padding-top:8px;'>" + "<table>" +"<tr>" +
"<td>" +"<img src='resources/frontView/images/common/true.jpg' width='30' height='30' />" +"</td>" +"<td style='font-size:13px;color:green'>恭喜,头像上传修改成功~</td>" +"</tr>" +"</table>" +"</div>").floatingMessage(position : "left-top",time:3000);
, error: function(msg)//服务器响应失败处理函数 alert(msg.responseText); ) return false;
action部分:
public String changeMyIcon()
//下面这句输出的是null，方法是进入了，但是值没有注进去
System.out.println("userIcon:" + getId_userIcon());
...
struts.xml中的配置:
<package name="userCenter" namespace="/" extends="json-default">
<action name="userCenter_*" class="userCenterAction" method="1">
<result name="userCenter">/userCenter.jsp</result>
<result type="json" name="success">
<param name="contentType">text/html</param>
</result>
</action>
</package>
个人浅见~ 参考技术A 李高杰
我可以使用jQuery.noConflict使用任何版本的jquery
正在使用此插件https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin，
但是我的jQuery版本是1.4，所以我使用了jQuery.noConflict()，因为有人说我可以通过此版本使用任何版本的jQuery：
var jq10 = jQuery.noConflict();
但是当我尝试使用该插件时，它将不起作用，它也不会出现错误，因此我不知道我的代码是否错误，或者即使使用jQuery.noConflict()也无法使用。有人知道吗？这是我正在做的示例，非常简单，但是它不起作用，或者没有任何错误可以给我提示
<html>
<input type="file" name="files[]" id="fileupload" multiple>
</html>
//This is my original version
<script language="javascript" type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
//This is the minimum version required of the plugin
<script type="text/javascript" src="/scripts/new_jquery/jquery-1.6.4.js"></script>
//These are the requirements for the plugin
<script language="javascript" type="text/javascript" src="/scripts/new_jquery/fileupload/js/vendor/jquery.ui.widget.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/new_jquery/fileupload/js/jquery.iframe-transport.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/new_jquery/fileupload/js/jquery.fileupload.js"></script>
$(document).ready( function()
var jq10 = jQuery.noConflict();
jq10('#fileupload').fileupload(
dataType: 'json',
add: function (e, data)
console.log(data);
);
);
[您看，我只是在控制台上记录了数据，但是它不会在萤火虫中返回任何内容，不会有错误，也不会给我任何提示。
尝试一下：
jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
所以，
var jq10 = jQuery.noConflict();
jq10(document).ready( function()
$('#fileupload').fileupload(
dataType: 'json',
add: function (e, data)
console.log(data);
);
);
用此替换所有内容：
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="file" name="files[]" id="fileupload" multiple>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/scripts/new_jquery/fileupload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/scripts/new_jquery/fileupload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/scripts/new_jquery/fileupload/js/jquery.fileupload.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function ($)
// Code that uses jQuery's $ can follow here.
$('#fileupload').fileupload(
dataType: 'json',
add: function (e, data)
console.log(data);
);
);// Code that uses other library's $ can follow here.
</script>
</body>
</html>
首先，有人告诉你错了。如果使用$.noConflict()，则不能使用其他版本的jquery。 （确定，可以，但是不建议使用）
但是请稍等！
您根本不应该加载两个版本的jquery。如果这样做，那就太荒谬了。
但是是
如果您确实必须使用过旧的插件或依赖于较旧的jquery版本。
以上是关于使用jquery的ajaxfileupload.js和struts2无刷新上传文件出错的主要内容，如果未能解决你的问题，请参考以下文章