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" ...
随机推荐
- RPC 初识
RPC是什么 RPC(Remote Procedure Call) 释义是远程过程调用,常存在于分布式系统中. 比如说现在有两台服务器A, B,一个在A服务器上的应用想要调用B服务器上的应用提供的某个 ...
- Ubuntu下搭建Kubernetes集群(1)--安装docker
可以使用物理机,也可以使用虚拟机. 首先参考https://docs.docker.com/install/linux/docker-ce/ubuntu/ 官方文档学会安装docker. 1.首先移除 ...
- 201777010217-金云馨《面向对象程序设计Java》第四周总结学习
2019面向对象程序设计(Java)第4周学习指导及要求 项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ ...
- android 开发工具 adb
1.abd基本使用 1.启动一个adb应用程序 adb -P <port> start-server # -P指定端口 默认是5037 1.停止adb adb kill-server 2. ...
- git fatal: remote origin already exists错误解决方案
$ git remote add origin git@github.com:AntonioSu/learngitWindows.git 在运行以上代码出现的错误,此错误是因为已经存在了远程分支,只需 ...
- opencv局限：cv::FileStorage读取中，xml文件的第一层节点不能超过4个
今天测试发现一个问题,cv::FileStorage读取中,xml文件的第一层节点不能超过4个. <?xml version="1.0"?> <opencv_st ...
- Tkinter--Text文本框样例
#-*- coding:utf-8 -*- """ Text 文本框样例 实现功能有:Ctrl+a全选文本, 竖向滚动条,横向滚动条(不自动换行) 自动缩放 有谁知道全选 ...
- Nginx的代理配置（六）
一.正向代理 1. 指令说明 (1) resolver 这个用于设置DNS服务器的ip .DNS服务器的主要工作是进行域名解析,将域名映射为对应IP地址. 语法:resolver address .. ...
- Docker常用命令（五）
一.帮助命令 docker version docker info # 重要 docker --help 可以使用docker COMMAND --help 查看某个命令具体如何使用. 二.镜像命令 ...
- LeetCode 79. Word Search单词搜索 (C++)
题目: Given a 2D board and a word, find if the word exists in the grid. The word can be constructed fr ...