Ajax实现附件上传
前两篇文章有介绍使用form.submit 实现附件的上传，但是这种方式使用起来很不方便，如过需要再上传成功以后执行一些其他的操作的时候比较麻烦。下面我为大家介绍下使用ajax实现附件上传的功能：
1.使用FormData对象上传附件：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
文件:<input id="file" type="file" name="file"/>
<button id="upload">上传文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData();
data.append("file", $("#file")[0].files[0]);
$.ajax({
type: 'post',
url: "XXX",
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上传失败");
});
});
});
</script>
</html>
参数说明：1、processData设置为false。因为data值是FormData对象，不需要对数据做处理。数据处理由于是object类型，jquery在处理是会无法处理报错 ;
2、cache设置为false，上传文件不需要缓存。
3、contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype=”multipart/form-data”，所以这里设置为false。
但是这个FormData对象只是在高版本的IE中支持，在低版本的IE中是不支持FormData对象的，下面这个方法可以实现低版本IE和高版本IE上传附件的兼容问题
2、使用form.ajaxSubmit提交请求，这个方法需要引用jquery.Form.js这个类库才可以，否则ajaxsubmit是无法使用的
<label for="btn_file">上传附件</label>
<form id="form" method="post" enctype="multipart/form-data">
<input type="file" id="btn_file" name="file" onchange="fileUpload()">
</form>
function fileUpload()
{
$('#form').ajaxSubmit({
type: "post",
url: "XXX.do?",//请求的 URL地址
data: $('#form').serialize(),
error: function (data) {
alert(data);
},
success: function (data) {
var result = eval('(' + data + ')');
if (result.success) {
alert(result.res);
}
}
});
}
Ajax实现附件上传的更多相关文章
- jquery 通过ajax FormData 对象上传附件
之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div> 流程图: <input id=& ...
- MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！
MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...
- PHP Ajax JavaScript 实现 无刷新附件上传
普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...
- 使用plupload做一个类似qq邮箱附件上传的效果
公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...
- jQuery+php实现ajax文件即时上传
很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像.本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进 ...
- jsp页面附件上传暂存的处理
有没有遇到页面是新建一个新对象,对象里面需要上传附件,但是只有当对象保存时才将附件一同上传到数据库的情况? 这种情况的处理可以参考狐狸的思路: @jsp页面创建一个botton bn,该button的 ...
- python django + js 使用ajax进行文件上传并获取上传进度案例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Springmvc file多附件上传 显示 删除操作
之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我copy下来了此贴算是改良版 再次感谢(忘记叫什么了时间也有点久没有历史记录了)先上图 基于 ...
- 附件上传vue组件封装（一）
//父页面部分 <attachment @newFileList="newFileList" :operationType="operationType" ...
随机推荐
- 白话SCRUM 之四：燃尽图
Burn down chart翻译为燃尽图或燃烧图,很形象,是Scrum中展示项目进展的一个指示器.我一直认为用户故事.每日站立会议.燃尽图.sprint review.sprint retrospe ...
- ubuntu 16.04中limit 修改
第一,修改/etc/security/limits.conf: * soft nproc 65535* hard nproc 65535* soft nofile 65535* hard nofile ...
- 网关地址和网关IP是什么，他们有什么关系？
2019-12-19 新用户541... 转自 小糊涂大神 修改 通常情况下,一台终端上网必须设置IP地址.子网掩码.网关IP地址,终端IP地址与网关IP属于同一个网段,网关IP是终端访问外网 ...
- Maven 中 dependencyManagement 元素，知识点
Maven 提供的 dependencyManagement 元素既能让子模块继承到父模块的依赖配置,又能保证子模块依赖使用的灵活性.在 dependencyManagement 元素下的依赖声明不会 ...
- USACO Sabotage
洛谷 P2115 [USACO14MAR]破坏Sabotage https://www.luogu.org/problem/P2115 JDOJ 2418: USACO 2014 Mar Gold 2 ...
- postgres 字符操作补位,字符切割
补位: ,'); -- 字符切割 并取值: )
- [ Python入门教程 ] Python基础语法
Python的语法非常简练,因此用Python编写的程序可读性强.容易理解.本章将介绍Python的基本语法和概念. Python文件类型 1.源代码.Python的源代码的扩展名以py结尾,可直接运 ...
- Web协议详解与抓包实战：HTTP1协议-HTTP 响应行（3）
一.HTTP 响应行 二.响应码分类:1xx 三.响应码分类: 2xx 1. 201 Created: 有新资源在服务器端被成功创建 2.207 Multi-Status:RFC4918 ,在 WEB ...
- markdown格式接口文档模板
源文件 https://files.cnblogs.com/files/bincoding/%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3.zip 目录 测试接口 查询指定项 ...
- C++中vector小学习，顺便查了下<stdio.h>（或<cstdio>）
今天看书,邻桌在看<C++ Primer>,拿过来看了一会儿.以前比较少用vector容器,看了下后,瞬间觉得好腻害的样子,就想试一下.嗯,就是试一下而已.(代码可能网上都差不多,有参考) ...