(转载自http://blog.csdn.net/cd0425/article/details/4836803
)
前台js插件ajaxfileupload+jquery的包
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload
(
{
url:'doajaxfileupload.action',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
json插件,下载地址:
http://jsonplugin.googlecode.com/files/jsonplugin-0.33.jar
struts.xml配置中的Action结果类型:
<package name="jsons" extends="json-default">
<action name="upFile" class=".....">
<result type="json">
<param name="contentType">text/html</param>
</result>
</action>
</package>
其中,contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因
为struts2 JSON
Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。
分享到:
相关推荐
jQuery插件`ajaxFileUpload`是一个专用于异步文件上传的解决方案,其设计思路是通过创建隐藏的表单和IFrame来实现JavaScript提交文件,同时返回服务器的响应数据。这个插件并非官方jQuery库的一部分,而是由开发者...
为了实现基于AJAX的文件上传功能,本文详细介绍了jQuery插件ajaxfileupload.js的使用方法。该插件允许开发者以异步的方式将文件数据上传至服务器,而无需刷新页面或提交传统表单,从而提升了用户体验。以下是对本文...
jQuery的ajaxfileupload.js插件可以解析这个响应,根据返回的状态更新UI,例如显示上传成功或失败的消息,以及新上传的图片预览。 index.htm是网页的主入口文件,它可能包含了HTML结构、CSS样式和JavaScript代码,...
1. **跨域限制**:由于浏览器的安全策略,`ajaxFileUpload`可能受到同源策略的限制,确保服务器端接口支持CORS(跨源资源共享)。 2. **文件大小限制**:客户端和服务端都需要对上传的文件大小进行限制,防止过大...
`jQuery Ajaxfileupload` 是一个用于异步文件上传的JavaScript插件,它允许用户在不刷新页面的情况下上传文件。这个插件是基于jQuery库构建的,因此需要在项目中引入jQuery.js来支持其功能。此外,为了实现异步上传...
在IT行业中,前端开发经常会遇到文件上传的需求,而AjaxFileUpload是一个非常实用的jQuery插件,用于实现异步文件上传。这个修复版的AjaxFileUpload针对高版本的jQuery进行了优化和兼容性处理,解决了在处理返回的...
6. **服务器处理**: 服务器端(JAVAEE环境)接收到请求后,解析上传的文件,执行相应的业务逻辑,比如保存文件到服务器目录,或者进行文件内容的处理。 7. **响应处理**: 服务器处理完请求后,返回一个JSON或XML...
对于文中提到的“每次跨域上传图片时,可以成功上传到服务器上,但是不能正确的返回信息,总是进入error方法中”的问题,可以从以下几个方面进行排查和优化: 1. **确保服务器端正确设置了CORS响应头**: - 在...
`ajaxfileupload.js` 是一个jQuery插件,专门用于处理文件的异步上传。它封装了HTML5的File API和FormData对象,实现了与后台交互的功能。 4. **JSON与插件** `struts2-json-plugin-2.3.15.1.jar` 是Struts2的JSON...
**AjaxFileUpload是jQuery插件,用于实现异步文件上传功能。它允许用户在不刷新整个页面的情况下上传文件,提供了一种更为流畅的用户体验。在Web开发中,尤其是在需要处理大量用户上传文件的场景下,AjaxFileUpload...
然后,使用 jQuery 的 `$.ajaxFileUpload()` 方法初始化插件,指定服务器端处理文件的URL以及一些可选参数,如成功回调函数、错误处理函数等。 ```javascript $('#yourFileInputId').ajaxFileUpload({ url: '...
这里,我们使用 `Gson` 库将结果转换为JSON格式并返回,以便 `AjaxFileUpload` 插件能够解析。 ### 5. 错误处理 在 `AjaxFileUpload` 的配置中,我们定义了 `error` 回调函数,用于处理上传过程中可能出现的错误。...
`$.ajaxFileUpload()` 接收多个参数,如服务器端处理文件的 URL、请求类型(通常是 POST)、文件元素 ID、预期的返回数据类型(如 JSON)等。以下是一个简单的示例: ```javascript $(function() { $("#upload1")....
- dataType设置为'json'意味着服务器端应该返回JSON格式的响应,这样前端可以通过JavaScript解析响应并进行相应的处理。 3. 成功上传的处理: - success回调函数用于处理服务器端成功上传文件后的响应数据。在这...
同时,服务器端可以在后台处理上传逻辑,无需用户等待,使得页面响应更加迅速。此外,异步上传还可以提高服务器的响应速度和效率,因为它可以并行处理多个上传请求,而不是一个接一个地处理。 通过本篇文章提供的...
在服务器端,如`doajaxfileupload.php`,你可以像处理普通文件上传一样操作`$_FILES`数组,判断上传是否成功并返回相应的JSON响应: ```php $upFilePath = "../attachment/"; $ok = @move_uploaded_file($_FILES['...
6. **服务器响应处理**:在`onComplete`回调函数中,我们清理定时器,恢复上传按钮的功能,并解析服务器返回的JSON数据。这个数据通常包含了上传文件的路径或元信息,可以用来更新页面上的图片源或隐藏上传按钮等。 ...
4. **响应处理**:在`success`回调函数中,你可以解析服务器返回的数据(通常是JSON格式),并更新页面内容,显示上传结果。 综上所述,`jsp ajax fileupload`的实现涉及前后端的协同工作。前端通过Ajax发送文件,...