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" ...
随机推荐
- [日期工具分享][Shell]为特定命令依次传入顺序日期执行
[日期工具分享][Shell]为特定命令依次传入顺序日期执行 使用方式: <本脚本文件名(必要时需要全路径)> <要执行的命令所在的文件名> <开始日期> < ...
- 关于UE4音效的一些小问题
前言 前几天实在忍受不了StarterContent默认音效的折磨,去网上翻罗了一下初中时很着迷的游戏<Bounce-Tales>的音效,在导入音效时出了点问题,特此说明一下解决方案,希望 ...
- P3731 [HAOI2017]新型城市化（tarjan+网络流）
洛谷 题意: 给出两个最大团的补图,现在要求增加一条边,使得最大最大团个数增加至少\(1\). 思路: 我们求出团的补图,问题可以转换为:对于一个二分图,选择删掉一条边,能够增大其最大独立集的点集数. ...
- Spring服务发现和注册
- 201871010126 王亚涛 《面向对象程序设计（Java）》第十周实验总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- JVM 学习资料
资料 网址 JVM Options - The complete reference http://jvm-options.tech.xebia.fr/ Java HotSpot VM Options ...
- Linux简单命令的使用
1.linux上怎么快速删除一个目录在linux中删除一个目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可解决.直接rm就可以了,不过要加两 ...
- 03-人脸识别-基于MTCNN，显示5个人脸特征
import tensorflow as tf import numpy as np import cv2 import detect_face import matplotlib.pyplot as ...
- LG2530 「SHOI2001」化工厂装箱员 高维DP+记忆化搜索
问题描述 LG2530 题解 设\(opt[i][a][b][c][d]\)代表装到第\(i\)个后,第\(1,2,3\)手上分别还剩\(a,b,c\)个的最小操作数. 记忆化搜索即可. 启示:如果状 ...
- RSA介绍
RSA加密算法是一种非对称加密算法.在公开密钥加密和电子商业中RSA被广泛使用. 公钥(Public Key)与私钥(Private Key)是通过一种算法得到的一个密钥对(即一个公钥和一个私钥),公 ...