最近开发一个项目，提交表单时，具有上传图片文件的功能。上传图片可以使用当前流行的Apache Fileupload或者struts自带的文件上传功能。但是，当限制为仅能上传最大1M的图片，并且只能是jpg,gif图的时候，如何进行验证呢？前端的js显然是没有权限访问本地文件来进行验证的。经过多方研究，想到了ajax的回调函数ajax_callback。
下面是前端jsp文件的部分代码
<head>
<script type="text/javascript">
function ajax_callback(result) {
if(/^1:/.test(result)){
alert(result.substr(3));
}else{
window.location.href=result;
}
return;
}
function submitform(){
var form=document.getElementById('fm');
form.target="check_frame";
form.submit();
}
</script>
</head>
<body>
<form action="uploadImg" enctype="multipart/form-data" method="post" id="fm" onsubmit="return false">
... ...
<input class="fileBtn" name="realFile1" id="realFile1" type="file"/>
... ...
<a href="javascript:void(0)" class="button" onclick="return submitform()">提交</a>
... ...
<iframe name="check_frame" style="display:none;"></iframe>
</form>
</body>
注意，在form表单的最底部，放置了一个iframe，作用是当提交表单form时执行的action的返回值可以target到隐藏的iframe
而在代码中的uploadImg服务端代码，此时需要具有返回值，我的做法是只要验证出错的代码，全都用1:开头，比如return "1:图片超过1M";等，那如果服务端方法的返回值是void怎么办呢？我使用了以下代码
public String appendJS(String res) {
String prefix = "<script type=\"text/javascript\" language=\"javascript\">document.domain=\"yourdomain.com\";parent.ajax_callback('";
String suffix = "')</script>";
return res == null ? prefix + suffix : prefix + res + suffix;
}
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
boolean verify = false;
... ...
... ...
//当文件上传上来之后，先进行文件后缀名，文件大小的服务端验证
//如果不符合，就使用下面的代码返回到前端
if(!verify){
HttpServletResponse response = inv.getResponse();
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String jsRes = appendJS(res);
if(logger.isDebugEnabled())
logger.debug("jsRes -> " + jsRes);
out.println(jsRes);
return;
}
}
经过QA详细测试，这种服务端验证的方式适合当前流行的大部分浏览器，例如FireFox,Chrome,IE等。
分享到：
相关推荐
在现代Web应用中，异步数据传输已经成为一种标准实践，...以上就是Ajax异步上传图片的基本流程和关键知识点，实践中可能需要根据具体需求进行调整和优化。通过Ajax，我们可以构建出响应快速、用户体验优秀的Web应用。
这个示例包含客户端和服务器端的源码，旨在展示如何使用jQuery实现AJAX功能。 **1. jQuery AJAX 基本用法** 在jQuery中，`$.ajax()`函数是进行异步请求的核心方法。它的基本语法如下： ```javascript $.ajax({ ...
5. 在Ajax回调函数中处理响应，根据验证结果展示错误信息或提交数据。 五、注意事项 - 避免暴露敏感信息：在验证失败时，不应返回过多的错误详情，防止注入攻击。 - 提供良好的用户体验：即使验证失败，也要确保...
3. **AJAX回调**：服务器返回响应后，客户端脚本会接收到这个响应，然后根据结果更新UI，如显示错误消息或成功提示。 4. **错误处理**：为了增强用户体验，应当包含适当的错误处理机制，例如处理网络故障、服务器...
DWR (Direct Web Remoting) 是一个开源Java库，它允许Web应用程序在客户端JavaScript和服务器端Java之间进行异步通信，实现了类似Ajax的功能。在这个小实例中，我们将探讨如何使用DWR来实现实时的文件上传功能，这...
上述示例代码中展示的是使用XMLHttpRequest对象创建Ajax请求，并设置了合适的回调函数来处理服务器返回的结果。 具体的实现步骤包括： 1. 创建XMLHttpRequest对象。 2. 使用open方法配置请求，包括指定请求类型...
这需要实现 IPostBackDataHandler 接口，以便在数据改变时处理客户端的回调。 6. **JavaScript 和 jQuery**：在客户端，JavaScript 通常用来处理事件和更新页面。jQuery 可以简化 DOM 操作，使得动态更新更加容易。...
题目描述中的"一个页面实现Ajax效果的增删改查-基本版"可能是指一个简单的Web页面，该页面通过JavaScript处理用户的交互，并使用Ajax调用ASP.NET服务端的方法来进行数据库操作。 1. **创建Ajax请求**： 使用...
在这个事件的回调函数中，我们可以获取到选中的文件对象，并准备进行AJAX上传。 ```javascript document.getElementById('uploadInput').addEventListener('change', function(e) { var file = e.target.files[0]...
成功回调函数中，接收返回的验证码并更新图片元素的`src`属性，实现图片的无刷新更换。 4. **验证用户输入**：用户输入验证码后，再次使用$.ajax发送POST请求，将输入的验证码值和可能的会话或Cookie中的验证码进行...
服务端处理后，通过回调函数更新页面上的数据显示结果。 5. **DB.sql文件**：这可能是数据库脚本文件，用于创建或初始化数据库结构。在项目开始时，可以通过运行这个脚本来设置测试数据。 6. **一个页面实现Ajax...
9. 错误回调处理：学习如何处理客户端的错误回调，确保程序在出现错误时有适当的反馈机制。 10. 客户端编程特性：深入探讨ASP.NET AJAX客户端库的特性，包括对象交互、JSON序列化和反序列化、客户端事件处理等。 ...
这样，当Ajax请求返回时，JavaScript的`success`回调就能接收到这些数据，并将其插入到下拉菜单中。 安全方面，这个实现需要注意以下几点： 1. 数据过滤与验证：确保来自客户端的请求参数安全可靠，防止SQL注入等...
2. 使用C#编写服务端代码，处理异步回调并更新客户端状态。 3. 实现无刷新验证，提高用户交互体验。 4. 使用AjaxControlToolkit扩展ASP.NET AJAX的功能，如Accordion、TabContainer等。 5. 利用AJAX进行JSON...
- 编写回调函数：当请求完成时，处理服务器返回的数据，更新DOM元素。 - 错误处理：设置事件监听器来处理网络错误或其他异常情况。 5. **示例代码** - C#服务端： ```csharp [WebMethod] public static ...
此外，还将讨论关于优化和调试AJAX应用程序的方法，包括异步回调的性能优化、错误处理策略和使用Profiler进行性能分析。最后，我们将接触一些高级主题，如使用jQuery与其他JavaScript库与ASP.NET AJAX集成，以及利用...
- **错误回调**：在Ajax调用中，可以设置error回调来处理服务器返回的错误信息。 - **WCF的Tracing和消息日志**：可以帮助调试服务端问题，确保数据正确发送和接收。 7. **跨域访问(CORS)** - 当Ajax请求的源与...
3. **异步处理**：通过回调函数或Promise处理异步响应，确保页面在等待服务器响应时不会冻结。 4. **跨域请求**：如果请求的URL与当前页面不在同一源，需要考虑CORS（跨源资源共享）策略，设置合适的响应头来允许...
JSONP是一种利用`<script>`标签不受同源策略限制的特性，通过动态创建`<script>`标签，将服务端提供的回调函数名与JSON数据一起返回，由客户端执行。 7. **安全考虑**：跨域请求虽然方便了开发，但也增加了安全风险...
- JavaScript是实现Ajax的关键，通过创建XMLHttpRequest对象实例，编写回调函数来处理服务器响应，以及构建请求参数，实现与服务器的交互。 - 使用`open()`方法设置请求类型（GET或POST）、URL和是否异步，接着...