JQ Ajax 上传文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FormData</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
<style>
#feedback{width:1200px;margin:0 auto;}
#feedback img{float:left;width:300px;height:300px;}
</style>
<div>
<!-- 点击图片添加文件方式 -->
<img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById('inputfile').click()" title="点击添加图片" alt="点击添加图片">
<input type="file" name="image" style="opacity:0;filter:alpha(opacity=0);" id="inputfile"/>
</div>
<div id="feedback"></div> <!-- 响应返回数据容器 -->
<script type="text/javascript">
$(document).ready(function(){
$("#inputfile").change(function(){
//创建FormData对象
var data = new FormData();
//为FormData对象添加数据
//
$.each($('#inputfile')[0].files, function(i, file) {
data.append('upload_file', file);
});
$.ajax({
url:'submit_form_process.php',
type:'POST',
data:data,
cache: false,
contentType: false, //不可缺
processData: false, //不可缺
success:function(data){
data = $(data).html();
if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));
else $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));
}
});
});
});
</script>
</body>
</html>
特别的：contentType: false,
processData: false,
这两个参数是必须的。
缺少contentType: false，$_FILES值为空。
缺少processData: false，FF控制台报错：“NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object”，直接不能运行。
后台：var_dump($_FILSE);
JQ Ajax 上传文件的更多相关文章
- models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...
- jQuery ajax上传文件实例
jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- 闲话ajax，例ajax轮询，ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
随机推荐
- MySQL分库备份与分表备份
MySQL分库备份与分表备份 1.分库备份 要求:将mysql数据库中的用户数据库备份,备份的数据库文件以时间命名 脚本内容如下: [root@db01 scripts]# vim backup_da ...
- JQuery的get、post和ajax方法的使用
在JQuery中可以使用get,post和ajax方法给服务器端传递数据 get方法的使用(customForGet.js文件): function verify(){ //1.获取文本框的数据 // ...
- android 带文字阴影的button
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- 让你的Photoshop编辑制作ICO格式图标文件（ICOFormat支持图标文件插件）
相信非常多制图的朋友都喜欢用PS,可是你能用Photoshop保存为ICO格式图标文件吗?默认肯定不行.不知道是什么原因,大名鼎鼎的图像编辑软件Adobe Photoshop一直不支持导入导出ico格 ...
- java运行shell命令，chmod 777 xxx，改变权限无效的解决的方法。
在java程序中运行shell命令,改变文件的权限.能够在命令行中运行 chmod 777 <span style="font-family: Arial, Helvetica, sa ...
- wifi简单笔记
什么是wifi: Wi-Fi是一种可以将个人电脑.手持设备(如PDA.手机)等终端以无线方式互相连接的技术.Wi-Fi是一个无线网路通信技术的品牌,由Wi-Fi联盟(Wi-Fi Alliance)所持 ...
- Mac下访问windows的共享文件夹
Finder->前往->smb://<user>@<ip>
- 算法笔记_087:蓝桥杯练习 9-1九宫格（Java）
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 九宫格.输入1-9这9个数字的一种任意排序,构成3*3二维数组.如果每行.每列以及对角线之和都相等,打印1.否则打印0. 样例输出 与上面 ...
- spring下载和安装
下载和安装Spring请按例如以下步骤进行. (1)登录网站,下载Spring的最新稳定版本号.最新版本号为spring-framework-4.0.建议下载spring-framework-sp ...
- Caused by: java.lang.NoSuchMethodError: javax.persistence.JoinColumn.foreignKey()Ljavax/persistence/
Caused by: Java.lang.NoSuchMethodError: javax.persistence.JoinColumn.foreignKey()Ljavax/persistence/ ...