法: $.ajax([settings]);
php作为后台的处理过程
ajax参数详解:
data
类型:String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter
类型:Function
给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType
类型:String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
error
类型:Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。
如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件。
global
类型:Boolean
是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
类型:Boolean
仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp
类型:String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
jsonpCallback
类型:String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。
password
类型:String
用于响应 HTTP 访问认证请求的密码
processData
类型:Boolean
默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
scriptCharset
类型:String
只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success
类型:Function
请求成功后的回调函数。
参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。
这是一个 Ajax 事件。
traditional
类型:Boolean
如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
timeout
类型:Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。
type
类型:String
默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
url
类型:String
默认值: 当前页地址。发送请求的地址。
username
类型:String
用于响应 HTTP 访问认证请求的用户名。
xhr
类型:Function
需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
文来自阿里云云栖社区,未经许可禁止转载。
更多资讯,尽在云栖科技快讯~
来科技快讯看新闻鸭~
快点关注我认识我爱上我啊~~~
摘要: Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发
jQuery对AJAX的支持 $.ajax() 语法: $.ajax({请求参数的json对象}); 请求参数对象的属性: URL:字符串 表示异步请求地址 type:字符串 请求方式 get或post date:传递到服务端的参数 参数字符串("name=dfh&age15")或json datetype:响应回来的数据格式 HTML xml text script json jsonp:有关跨域的响应了格式 success: 回调函数 响应成功后的回调函数 error: 回调函数 请求或响应失败时的回调函数 beforSend: 回调函数 发送AJAX请求之前的回调函数 如果return False 则终止请求发送
跨域(Cross Domain) 什么是跨域? HTTP协议中有一个策略 "同源策略" 同源: 多个地址中 相同的协议 相同的域名 相同的端口 在HTTP中 必须是同源地址中 必须是同源地址才能相互 发送请求 非同源拒绝请求(<script>和<img>除外) 非同源的网页相互发送请求的过程就是跨域 跨域只能接受GET请求 不能接受POST请求 跨域解决方案: 通过<script>标记向服务器发送请求 由服务器资源指定前端页面的那个方法来执行响应的数据 jQuery的跨域: jsonp json with padding $.ajax({ url:"xxx", type: "get", dataType:'jsonp', //指定跨域访问 jsonp: "callback", //定义了callback函数名 以便于callback传递过去的函数名 jsonpCallback:'xxx' //定义了传递过去函数的名字 jsonp的回调函数 });
三种形式的跨域请求
传大的附件分为两种情况,
第2种使用分片上传
优势:可以突破服务器上传大小的限制,可以web存储上传到哪一块了,在浏览器关闭或者刷新的情况下可以断点续传;
劣势:上传速度慢,在我本地电脑测试,200M的文件,改变配置按照正常方式上传大约需要12到15秒,但是使用第2种分片上传,大约需要40多秒,也就是所需时间是正常上传的3倍,我测试了for循环同时上传几个碎片,电脑直接很卡,点击别的浏览器或者文件夹之类的全部是没有响应,所以放弃了使用循环同时上传多个;
如果上传大的文件实现进度条是很有必要的,否则用户看不到进度会等得不耐烦了。
小的文件只需要2秒左右,是否有进度条没有关系。
第一种,在可以改变服务器配置的前提下
图1 带进度条文件上传
1、配置php.ini
如果上传的文件比较大,以上4点都需要修改,特别是第2点,尽可能配置,否则上传最后会比较慢。
2、iis上传大小限制,可以在web.config直接修改,加入以下代码
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
<requestLimits maxAllowedContentLength="1073741824" /> 这里是限制的大小,默认大小忘记了,我这里设置的是可以上传1G进行的测试。
3、nginx上传大小限制
我开始想把这些加到location / {}里边,提示错误client_header_timeout不允许放到里边,所以全部加到外边了,也就是server {}里边;
注意下第6点,如果不配置,nginx上传文件会存到缓存,然后再一点一点传到upload_tmp_dir的目录下,导致上传所需时间是iis的2倍。
4、html代码
<tr class=''>
<td width="90" align="right" rowspan='2'>超大附件</td>
<td>
<div class='jdfull '><div class='jdperc'></div></div>
<div class='jdtis '>0%</div>
<input type='file' id="down_bfule_tpfile" class='inpMain layui-inpu' name='' size='30'><button type='button' class='layui-btn submitpfile' >上传</button> </td>
</tr>
<tr class=''>
<td>
<input type='text' class='inpMain' placeholder='不限大小' style='width:calc(100% - 20px);' value='' name='down_bfule' id="down_bfule" ></td>
</tr>
5、css代码 用来设置进度条
/*进度条*/
.jdfull{width:calc(100%);height:20px;background:#FFF;margin-bottom:10px;border-radius:10px;border:1px solid #DDD;}
.jdperc{height:20px;background:#5FB878;width:0px;border-radius:10px;}
.jdtis{margin-bottom:10px;}
6、js代码(jquery使用监听progress实现进度条功能)
$(".submitpfile").click(function() {
var fileext=['rar','zip','pdf'];
var formData = new FormData();
formData.append("file", $("#down_bfule_tpfile").get(0).files[0]);
if (!$("#down_bfule_tpfile").get(0).files[0]) {
alert("请选择要上传的文件!");
return false
};
//判断扩展名 是否支持上传
var patharr = $("#down_bfule_tpfile").get(0).files[0].name.split(".");
//上传文件扩展名转小写,ZIP zip 2个是同一个文件
var ext = patharr[patharr.length - 1].toLowerCase();
if (fileext.indexOf(ext) < 0) {
alert('只支持' + fileext.join(','));
return false;
}
$.ajax({
url: '处理图片上传的url',
data: formData,
type: "post",
dataType: "json",
contentType: false,
processData: false,
//监听progress 实现上传进度条
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress',
function(e) {
console.log(e);
//百分比取整
var progressRate = parseInt((e.loaded / e.total) * 100);
$('.jdfull .jdperc').css('width', progressRate + "%");
$('.jdtis').html(progressRate + "%")
});
return xhr
},
/*进度条结束*/
success: function(result) {
if (result.error == "0000") {
console.log(result.msg);
//上传完成以后文件地址赋值给文本框,用于表单提交
$("#down_bfule").val(result.msg);
} else {
//错误信息提示
alert(result.msg);
return false
}
//上传框初始化
var objFile = document.getElementById("down_bfule_tpfile");
objFile.outerHTML = objFile.outerHTML.replace(/(value=\").+\"/i, '$1"')
}
})
})
7、后端php处理程序
foreach($_FILES as $k=>$v){
$v['name']//文件名称
$v['size']//文件大小
$v["tmp_name"]//临时文件名包含了物理路径E:\temp\文件名
move_uploaded_file($v["tmp_name"],'文件存放路径(物理路径+文件名)')
}
第二种,不能改变服务器的配置使用分片上传
图2 进度条显示多少片
html,css不变,只是改变js,下面是用到的js代码
代码1:点击事件
$(".submitpfile").click(function() {
var fileext=['rar','zip','pdf'];//支持格式
var ranksize=1024*1024;//分片每次上传的大小 1M
if (!$("#down_bfule_tpfile").get(0).files[0]) {
alert("请选择要上传的文件!");
return false
};
var patharr = $("#down_bfule_tpfile").get(0).files[0].name.split(".");
var ext = patharr[patharr.length - 1].toLowerCase();
if (fileext.indexOf(ext) < 0) {
alert('只支持' + fileext.join(','));
return false
}
var size = $("#down_bfule_tpfile").get(0).files[0].size;
var start=true;//是否从第一个开始上传
var localname=$("#down_bfule_tpfile").get(0).files[0].name;
/*
使用localStorage 文件名作文变量存储
存储大小,还有上传了多少片
文件名存放 判断大小 如果大小也和上传的文件相同判断为同一个文件
如果用户把文件名改成了上传过的,不加判断会造成上传文件错误
window.localStorage.getItem 获取存储的数据
window.localStorage.setItem 设置存储的数据 key value
window.localStorage.removeItem 移除存储的数据
JSON.parse 字符串转成json格式
*/
if(JSON.parse(window.localStorage.getItem(localname))){
var localsize=JSON.parse(window.localStorage.getItem(localname)).localsize;
var ranknum=JSON.parse(window.localStorage.getItem(localname)).ranknum;
if(size==localsize){
//已经上传过 但是没有上传完,中断了
start=false;
}
}
if(start==true){
//第一片开始上传
uploadtp(1);
}else{
//存储的下一片开始上传
uploadtp(ranknum+1);
}
})
代码2:uploadtp方法
function uploadtp(m){
var size = $("#down_bfule_tpfile").get(0).files[0].size;
var formData = new FormData();
formData.append("filename", $("#down_bfule_tpfile").get(0).files[0].name);
formData.append("size", size);
//Math.ceil 向上取整 获得上传总得片数 例如:1.1 1.9 都会取整为2,和php的分页一个性质
rankcount=Math.ceil(size/ranksize);
/*
uptemp 用于存放 要上传大小 上传完多少片
uptemp['ranknum']=m; 上传完多少片
uptemp['localsize']=size; 上传文件总得大小,用于判断要上传的是否同一个文件
JSON.stringify 数组转成json字符串
*/
var uptemp={};
uptemp['ranknum']=m;
uptemp['localsize']=size;
window.localStorage.setItem($("#down_bfule_tpfile").get(0).files[0].name,JSON.stringify(uptemp));
/*存储完成*/
/*
$("#down_bfule_tpfile").get(0).files[0].slice 对选择的文件进行切割
(m-1)*ranksize 起始位置
m*ranksize 结束位置
*/
formData.append("photo", $("#down_bfule_tpfile").get(0).files[0].slice((m-1)*ranksize,m*ranksize));
$.ajax({
url: "处理上传的url",
data: formta,
type: "post",
dataType: "json",
contentType: false,
processData: false,
/*
进度条开始
这是一种竖线方式 监听progress,监听每一片的上传进度
*/
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress',
function(e) {
console.log(e);
var progressRate = parseInt((e.loaded / e.total) * 100);
$('.jdfull .jdperc').css('width', progressRate + "%");
$('.jdtis').html("总共:<span style='color:red'>"+rankcount+"</span>片,当前:第<span style='color:red'>"+m+"</span>片"+progressRate + "%")
});
return xhr
},
/*进度条结束*/
success: function(result) {
if (result.error == "0000") {
$('.jdtis').html("全部上传完成!");
//上传完成,清除以前的分片存储
window.localStorage.removeItem($("#down_bfule_tpfile").get(0).files[0].name);
var objFile = document.getElementById("down_bfule_tpfile");
objFile.outerHTML = objFile.outerHTML.replace(/(value=\").+\"/i, '$1"');
$("#down_bfule").val(result.msg)
} else if(result.error == "0001") {
//0001文件没有上传完 需要继续上传
uploadtp(m+1);
}else{
//php处理返回的错误提示 比如长时间没有刷新页面,导致已经退出登陆了
alert(result.msg);
return false
}
}
/*
第2种 去掉上边进度条开始 到结束的代码,使用下面的success 代替上边的success
根据上传了多少片除以总数 显示当前的百分比 var progressRate=parseInt((m / rankcount) * 100);
*/
/*
success: function(result) {
if (result.error == "0000") {
var progressRate=100;
$('.jdfull .jdperc').css('width', progressRate + "%");
$('.jdtis').html("全部上传完成!");
window.localStorage.removeItem($("#down_bfule_tpfile").get(0).files[0].name);
var objFile = document.getElementById("down_bfule_tpfile");
objFile.outerHTML = objFile.outerHTML.replace(/(value=\").+\"/i, '$1"');
$("#down_bfule").val(result.msg)
} else if(result.error == "0001") {
var progressRate=parseInt((m / rankcount) * 100);
$('.jdfull .jdperc').css('width', progressRate + "%");
$('.jdtis').html(progressRate + "%");
//0001文件没有上传完 需要继续上传
uploadtp(m+1);
}else{
//php处理返回的错误提示 比如长时间没有刷新页面,导致已经退出登陆了
alert(result.msg);
return false
}
}
*/
})
}
php后端处理程序
$filename=input('post.filename');//原始文件名
$size=input('post.size');//原始文件大小
//创建存放的文件夹
foreach($_FILES as $k=>$v){
//$v["tmp_name"]临时文件 含路径
$images_dir = '/public/upload/file/'.date("Ymd")."/";
if (!file_exists(ROOT_PATH."".$images_dir)) {
mkdir(ROOT_PATH."".$images_dir,0777);
}
$name = explode(".", $filename); //将上传前的文件以“.”分开取得文件类型 支持png jpg gif
$imgtype=strtolower($name[count($name)-1]);//类型转成小写
$newname=date("YmdHis".rand(10000,99999)).".".$imgtype;//新的文件名
//file_put_contents 追加 注意有FILE_APPEND,不加的话会覆盖原来的
//file_get_contents读取内容
file_put_contents(ROOT_PATH.$images_dir.$filename,file_get_contents($v["tmp_name"]),FILE_APPEND);
//判断大小 是否已经上传完成
if(filesize(ROOT_PATH.$images_dir.$filename)>=$size){
rename(ROOT_PATH.$images_dir.$filename,ROOT_PATH.$images_dir.$newname);
exit( json_encode(array('error'=>'0000','msg'=>$images_dir.$newname),JSON_UNESCAPED_UNICODE));
}else{
exit( json_encode(array('error'=>'0001'),JSON_UNESCAPED_UNICODE));
}
}
说明:
nginx上传文件很慢
处理办法:关闭 fastcgi_request_buffering,如果不关闭,上传所需时间至少是iis的2倍;
具体操作:编辑nginx.conf,
server {
fastcgi_request_buffering off;
}
*请认真填写需求信息,我们会在24小时内与您取得联系。