<html>
<head>
<script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.ajaxform.js"></script>
</head>
<body>
<form name="form" action="upload" method="POST" id="userForm" enctype="multipart/form-data">
<div class="wrap">
<div class="album-old">
<div class="upload-btn btn-old"><input type="file" name="file" accept="image/*" id="image1" capture="camera"></div>
<div class="upload-img "></div>
</div>
<div class="submit" style="margin-top: 200px;">提交</div>
</div>
</form>
</body>
<script type="text/javascript">
$(function(){
// $(".submit").on(
// "click",function() {
// var fileObj = document.getElementById("image1").files[0];
// var formData = new FormData();
//
// formData.append("file",fileObj);
// var xhr = new XMLHttpRequest();
//
// xhr.open("post","/Api/News/upload",true);
// xhr.send(formData);
//
// xhr.onload = function(e){
// if (this.status == 200) {
// window.alert(this.responseText);
// }
// }
// })
$(".submit").on("click",function() {
userBrowser();
});
});
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
$("#userForm").ajaxSubmit(function(data){alert(data.fileurl);});
return ;
}else if(/firefox/i.test(browserName)){
$("#userForm").ajaxSubmit(function(data){alert(data.fileurl);});
return ;
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
$("#userForm").ajaxSubmit(function(data){alert(data.fileurl);});
return ;
}else if(/opera/i.test(browserName)){
$("#userForm").ajaxSubmit(function(data){alert(data.fileurl);});
return ;
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
$("#userForm").ajaxSubmit(function(data){alert(data.fileurl);});
return ;
}else{
$("#userForm").ajaxSubmit(function(data){alert(data.fileurl);});
}
}
function test()
{
alert(navigator.userAgent.toLowerCase().indexOf("MSIE"));
if(navigator.userAgent.indexOf("MSIE")>0)
$("#userForm").ajaxSubmit(function(data){alert(data);});
else $("#userForm").ajaxForm(function(data){alert(data);});
}
</html>
注：FormData IE8兼容问题
分享到：
相关推荐
4. **处理图片上传**：由于ajaxForm支持File API，我们可以轻松处理图片上传。在beforeSubmit回调中，可以使用`FormData`对象来添加文件： ```javascript var formData = new FormData(); formData.append('image...
在调用`ajaxForm`或`ajaxSubmit`时，你可以传递一个Options对象，定制Ajax请求的行为。Options包括但不限于： - `beforeSubmit`: 提交前的回调函数，可以进行数据验证或预处理。 - `success`: 请求成功后的回调函数...
`ajaxSubmit`是jQuery Form Plugin的一部分，它允许我们使用Ajax技术实现表单的异步提交，包括多文件上传。这种方式不仅可以提高用户体验，因为用户无需等待页面刷新，还能有效管理服务器资源，避免一次性处理大量...
AjaxSubmit是jQuery Form插件中的一个方法，它允许我们在不刷新整个页面的情况下，通过AJAX方式提交表单，包括文件在内的所有数据。这种方式避免了页面的闪烁和跳转，提高了用户交互性。 二、Servlet在文件上传中的...
**Ajax无刷新上传图片技术详解** 在Web开发中，用户经常需要上传文件，尤其是图片，而传统的文件上传方式会刷新整个页面，导致用户体验不佳。Ajax无刷新上传图片技术的出现，解决了这一问题，实现了在不刷新页面的...
### JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法详解 #### 一、引言 在 Web 开发中，使用 AJAX 进行异步表单提交是一种常见的技术手段，它允许开发者无需重新加载整个页面即可提交数据并接收响应...
在实际应用中，比如文件上传、表单验证等场景，AjaxSubmit()方法显得尤为实用。 1. **引入依赖** 使用AjaxSubmit()首先需要在HTML页面中引入jQuery库和jQuery Form插件。你可以通过以下方式引入： ```html ...
### Ajax 上传图片知识点解析 #### 一、Ajax 上传图片概述 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。利用Ajax技术进行图片上传，可以实现用户在上...
4. **上传头像与上传文件**: 标签中提到了“上传头像”和“上传文件”，这表明这个功能可能涉及到用户上传个人图片作为头像，或者上传其他类型的文件。在使用Ajax提交时，通常需要处理文件上传，因为文件是二进制...
在`jquery.form.js`中，首先定义了$.fn.extend方法，将$.ajaxForm和$.ajaxSubmit两个主要功能方法添加到jQuery对象上，使得用户可以通过`$(form).ajaxForm()`或`$(form).ajaxSubmit()`进行调用。 2. AjaxForm方法 ...
《jQuery Form插件在IE8中的兼容性及文件上传应用详解》 在Web开发中，JavaScript库jQuery以其简洁的API和强大的功能深受开发者喜爱。在处理表单提交和文件上传时，jQuery Form插件（jquery.form.js）为开发者提供...
使用`$.ajax`或`$("#formId").ajaxSubmit`（来自`jquery.form.js`）来实现异步上传。这里假设有一个名为`upload.jsp`的后端页面处理图片上传： ```javascript $("#uploadImage").change(function() { var formData...
在Web开发过程中，文件上传是一项常见的功能需求...Ajax方式提供了更强大的功能和更灵活的交互，而form+iframe则在兼容性和稳定性上有所优势。在实际开发中，可以根据应用的具体需求和环境选择合适的文件上传实现方法。
3. **初始化插件**：使用jQuery选择器选取表单，然后调用`$.ajaxForm`或`$.fn.form`方法进行初始化。 ```javascript $('#myForm').ajaxForm({ beforeSubmit: function(arr, form, options) { // 预提交操作，如...
### 使用jQuery Form插件将表单提交转换为Ajax提交 #### 概述 本文档将详细介绍如何使用jQuery Form插件将HTML表单的提交过程转换为Ajax方式提交，从而实现无需刷新页面即可提交数据到服务器的功能。这种方法可以...
- 错误的情况：如果在异步操作（如Ajax请求）中处理表单提交，可能会出现此错误，因为页面状态在回调函数执行时可能已改变。 - 解决方案：确保在异步操作的回调函数中正确处理表单提交，或者使用`event....
然后，通过`.ajaxForm()`或`.ajaxSubmit()`方法绑定到表单元素，配置相应的参数，即可启用异步提交功能。例如： ```javascript $("#myForm").ajaxForm({ beforeSubmit: function() { // 提交前的处理 }, ...
配合`iframe`或者`FormData`，可以实现跨域文件上传。 **7. 兼容性与最佳实践** 考虑到兼容性，确保你的项目支持最低版本的jQuery和浏览器。同时，为提高性能，可以使用最新的jQuery版本，并利用CDN（内容分发网络...
此外，为了提高用户体验，可以使用插件如jQuery Form Plugin或plupload等，它们提供了更丰富的功能和更好的跨浏览器兼容性。 总的来说，"jQuery多文件上传"是一个结合了HTML5、jQuery、Ajax和服务器端技术的综合...