整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
法： $.ajax([settings]);
php作為后臺(tái)的處理過(guò)程
ajax參數(shù)詳解：
data
類型：String
發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后。查看 processData 選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組，jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。
dataFilter
類型：Function
給 Ajax 返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)。提供 data 和 type 兩個(gè)參數(shù)：data 是 Ajax 返回的原始數(shù)據(jù)，type 是調(diào)用 jQuery.ajax 時(shí)提供的 dataType 參數(shù)。函數(shù)返回的值將由 jQuery 進(jìn)一步處理。
dataType
類型：String
預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息來(lái)智能判斷，比如 XML MIME 類型就被識(shí)別為 XML。在 1.4 中，JSON 就會(huì)生成一個(gè) JavaScript 對(duì)象，而 script 則會(huì)執(zhí)行這個(gè)腳本。隨后服務(wù)器端返回的數(shù)據(jù)會(huì)根據(jù)這個(gè)值解析后，傳遞給回調(diào)函數(shù)。可用值:
"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文本 HTML 信息；包含的 script 標(biāo)簽會(huì)在插入 dom 時(shí)執(zhí)行。
"script": 返回純文本 JavaScript 代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意：在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下)，所有 POST 請(qǐng)求都將轉(zhuǎn)為 GET 請(qǐng)求。（因?yàn)閷⑹褂?DOM 的 script標(biāo)簽來(lái)加載）
"json": 返回 JSON 數(shù)據(jù) 。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時(shí)，如 "myurl?callback=?" jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
"text": 返回純文本字符串
error
類型：Function
默認(rèn)值: 自動(dòng)判斷 (xml 或 html)。請(qǐng)求失敗時(shí)調(diào)用此函數(shù)。
有以下三個(gè)參數(shù)：XMLHttpRequest 對(duì)象、錯(cuò)誤信息、（可選）捕獲的異常對(duì)象。
如果發(fā)生了錯(cuò)誤，錯(cuò)誤信息（第二個(gè)參數(shù)）除了得到 null 之外，還可能是 "timeout", "error", "notmodified" 和 "parsererror"。
這是一個(gè) Ajax 事件。
global
類型：Boolean
是否觸發(fā)全局 AJAX 事件。默認(rèn)值: true。設(shè)置為 false 將不會(huì)觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
類型：Boolean
僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。默認(rèn)值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中，它也會(huì)檢查服務(wù)器指定的 'etag' 來(lái)確定數(shù)據(jù)沒(méi)有被修改過(guò)。
jsonp
類型：String
在一個(gè) jsonp 請(qǐng)求中重寫(xiě)回調(diào)函數(shù)的名字。這個(gè)值用來(lái)替代在 "callback=?" 這種 GET 或 POST 請(qǐng)求中 URL 參數(shù)里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 會(huì)導(dǎo)致將 "onJsonPLoad=?" 傳給服務(wù)器。
jsonpCallback
類型：String
為 jsonp 請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。這個(gè)值將用來(lái)取代 jQuery 自動(dòng)生成的隨機(jī)函數(shù)名。這主要用來(lái)讓 jQuery 生成度獨(dú)特的函數(shù)名，這樣管理請(qǐng)求更容易，也能方便地提供回調(diào)函數(shù)和錯(cuò)誤處理。你也可以在想讓瀏覽器緩存 GET 請(qǐng)求的時(shí)候，指定這個(gè)回調(diào)函數(shù)名。
password
類型：String
用于響應(yīng) HTTP 訪問(wèn)認(rèn)證請(qǐng)求的密碼
processData
類型：Boolean
默認(rèn)值: true。默認(rèn)情況下，通過(guò)data選項(xiàng)傳遞進(jìn)來(lái)的數(shù)據(jù)，如果是一個(gè)對(duì)象(技術(shù)上講只要不是字符串)，都會(huì)處理轉(zhuǎn)化成一個(gè)查詢字符串，以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹(shù)信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為 false。
scriptCharset
類型：String
只有當(dāng)請(qǐng)求時(shí) dataType 為 "jsonp" 或 "script"，并且 type 是 "GET" 才會(huì)用于強(qiáng)制修改 charset。通常只在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。
success
類型：Function
請(qǐng)求成功后的回調(diào)函數(shù)。
參數(shù)：由服務(wù)器返回，并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù)；描述狀態(tài)的字符串。
這是一個(gè) Ajax 事件。
traditional
類型：Boolean
如果你想要用傳統(tǒng)的方式來(lái)序列化數(shù)據(jù)，那么就設(shè)置為 true。請(qǐng)參考工具分類下面的 jQuery.param 方法。
timeout
類型：Number
設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。
type
類型：String
默認(rèn)值: "GET")。請(qǐng)求方式 ("POST" 或 "GET")， 默認(rèn)為 "GET"。注意：其它 HTTP 請(qǐng)求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。
url
類型：String
默認(rèn)值: 當(dāng)前頁(yè)地址。發(fā)送請(qǐng)求的地址。
username
類型：String
用于響應(yīng) HTTP 訪問(wèn)認(rèn)證請(qǐng)求的用戶名。
xhr
類型：Function
需要返回一個(gè) XMLHttpRequest 對(duì)象。默認(rèn)在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用于重寫(xiě)或者提供一個(gè)增強(qiáng)的 XMLHttpRequest 對(duì)象。這個(gè)參數(shù)在 jQuery 1.3 以前不可用。
文來(lái)自阿里云云棲社區(qū)，未經(jīng)許可禁止轉(zhuǎn)載。
更多資訊，盡在云棲科技快訊~
來(lái)科技快訊看新聞鴨~
快點(diǎn)關(guān)注我認(rèn)識(shí)我愛(ài)上我啊~~~
摘要： Flask、Python、Django、框架、服務(wù)器、客戶端、瀏覽器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式開(kāi)發(fā)
jQuery對(duì)AJAX的支持
$.ajax()
語(yǔ)法：
$.ajax({請(qǐng)求參數(shù)的json對(duì)象});
請(qǐng)求參數(shù)對(duì)象的屬性：
URL：字符串 表示異步請(qǐng)求地址
type：字符串 請(qǐng)求方式 get或post
date：傳遞到服務(wù)端的參數(shù) 參數(shù)字符串（"name=dfh&age15"）或json
datetype：響應(yīng)回來(lái)的數(shù)據(jù)格式
HTML
xml
text
script
json
jsonp：有關(guān)跨域的響應(yīng)了格式
success：
回調(diào)函數(shù) 響應(yīng)成功后的回調(diào)函數(shù)
error：
回調(diào)函數(shù) 請(qǐng)求或響應(yīng)失敗時(shí)的回調(diào)函數(shù)
beforSend：
回調(diào)函數(shù) 發(fā)送AJAX請(qǐng)求之前的回調(diào)函數(shù)
如果return False 則終止請(qǐng)求發(fā)送
跨域（Cross Domain）
什么是跨域？
HTTP協(xié)議中有一個(gè)策略 "同源策略"
同源：
多個(gè)地址中 相同的協(xié)議 相同的域名 相同的端口
在HTTP中 必須是同源地址中 必須是同源地址才能相互
發(fā)送請(qǐng)求 非同源拒絕請(qǐng)求（<script>和<img>除外）
非同源的網(wǎng)頁(yè)相互發(fā)送請(qǐng)求的過(guò)程就是跨域
跨域只能接受GET請(qǐng)求 不能接受POST請(qǐng)求
跨域解決方案：
通過(guò)<script>標(biāo)記向服務(wù)器發(fā)送請(qǐng)求
由服務(wù)器資源指定前端頁(yè)面的那個(gè)方法來(lái)執(zhí)行響應(yīng)的數(shù)據(jù)
jQuery的跨域：
jsonp json with padding
$.ajax({
url:"xxx",
type: "get",
dataType:'jsonp', //指定跨域訪問(wèn)
jsonp: "callback", //定義了callback函數(shù)名 以便于callback傳遞過(guò)去的函數(shù)名
jsonpCallback:'xxx' //定義了傳遞過(guò)去函數(shù)的名字 jsonp的回調(diào)函數(shù)
});
三種形式的跨域請(qǐng)求
傳大的附件分為兩種情況，
第2種使用分片上傳
優(yōu)勢(shì)：可以突破服務(wù)器上傳大小的限制，可以web存儲(chǔ)上傳到哪一塊了，在瀏覽器關(guān)閉或者刷新的情況下可以斷點(diǎn)續(xù)傳；
劣勢(shì)：上傳速度慢，在我本地電腦測(cè)試，200M的文件，改變配置按照正常方式上傳大約需要12到15秒，但是使用第2種分片上傳，大約需要40多秒，也就是所需時(shí)間是正常上傳的3倍，我測(cè)試了for循環(huán)同時(shí)上傳幾個(gè)碎片，電腦直接很卡，點(diǎn)擊別的瀏覽器或者文件夾之類的全部是沒(méi)有響應(yīng)，所以放棄了使用循環(huán)同時(shí)上傳多個(gè)；
如果上傳大的文件實(shí)現(xiàn)進(jìn)度條是很有必要的，否則用戶看不到進(jìn)度會(huì)等得不耐煩了。
小的文件只需要2秒左右，是否有進(jìn)度條沒(méi)有關(guān)系。
第一種，在可以改變服務(wù)器配置的前提下
圖1 帶進(jìn)度條文件上傳
1、配置php.ini
如果上傳的文件比較大，以上4點(diǎn)都需要修改，特別是第2點(diǎn)，盡可能配置，否則上傳最后會(huì)比較慢。
2、iis上傳大小限制，可以在web.config直接修改，加入以下代碼
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security><requestLimits maxAllowedContentLength="1073741824" /> 這里是限制的大小，默認(rèn)大小忘記了，我這里設(shè)置的是可以上傳1G進(jìn)行的測(cè)試。
3、nginx上傳大小限制
我開(kāi)始想把這些加到location / {}里邊，提示錯(cuò)誤client_header_timeout不允許放到里邊，所以全部加到外邊了，也就是server {}里邊；
注意下第6點(diǎn)，如果不配置，nginx上傳文件會(huì)存到緩存，然后再一點(diǎn)一點(diǎn)傳到upload_tmp_dir的目錄下，導(dǎo)致上傳所需時(shí)間是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代碼 用來(lái)設(shè)置進(jìn)度條
/*進(jìn)度條*/
.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使用監(jiān)聽(tīng)progress實(shí)現(xiàn)進(jìn)度條功能)
$(".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("請(qǐng)選擇要上傳的文件！");
return false
};
//判斷擴(kuò)展名 是否支持上傳
var patharr = $("#down_bfule_tpfile").get(0).files[0].name.split(".");
//上傳文件擴(kuò)展名轉(zhuǎn)小寫(xiě)，ZIP zip 2個(gè)是同一個(gè)文件
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,
//監(jiān)聽(tīng)progress 實(shí)現(xiàn)上傳進(jìn)度條
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
},
/*進(jìn)度條結(jié)束*/
success: function(result) {
if (result.error == "0000") {
console.log(result.msg);
//上傳完成以后文件地址賦值給文本框，用于表單提交
$("#down_bfule").val(result.msg);
} else {
//錯(cuò)誤信息提示
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"]//臨時(shí)文件名包含了物理路徑E:\temp\文件名
move_uploaded_file($v["tmp_name"],'文件存放路徑（物理路徑+文件名）')
}第二種，不能改變服務(wù)器的配置使用分片上傳
圖2 進(jìn)度條顯示多少片
html，css不變，只是改變js，下面是用到的js代碼
代碼1：點(diǎn)擊事件
$(".submitpfile").click(function() {
var fileext=['rar','zip','pdf'];//支持格式
var ranksize=1024*1024;//分片每次上傳的大小 1M
if (!$("#down_bfule_tpfile").get(0).files[0]) {
alert("請(qǐng)選擇要上傳的文件！");
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;//是否從第一個(gè)開(kāi)始上傳
var localname=$("#down_bfule_tpfile").get(0).files[0].name;
/*
使用localStorage 文件名作文變量存儲(chǔ)
存儲(chǔ)大小，還有上傳了多少片
文件名存放 判斷大小 如果大小也和上傳的文件相同判斷為同一個(gè)文件
如果用戶把文件名改成了上傳過(guò)的，不加判斷會(huì)造成上傳文件錯(cuò)誤
window.localStorage.getItem 獲取存儲(chǔ)的數(shù)據(jù)
window.localStorage.setItem 設(shè)置存儲(chǔ)的數(shù)據(jù) key value
window.localStorage.removeItem 移除存儲(chǔ)的數(shù)據(jù)
JSON.parse 字符串轉(zhuǎn)成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){
//已經(jīng)上傳過(guò) 但是沒(méi)有上傳完，中斷了
start=false;
}
}
if(start==true){
//第一片開(kāi)始上傳
uploadtp(1);
}else{
//存儲(chǔ)的下一片開(kāi)始上傳
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 向上取整 獲得上傳總得片數(shù) 例如：1.1 1.9 都會(huì)取整為2，和php的分頁(yè)一個(gè)性質(zhì)
rankcount=Math.ceil(size/ranksize);
/*
uptemp 用于存放 要上傳大小 上傳完多少片
uptemp['ranknum']=m; 上傳完多少片
uptemp['localsize']=size; 上傳文件總得大小，用于判斷要上傳的是否同一個(gè)文件
JSON.stringify 數(shù)組轉(zhuǎn)成json字符串
*/
var uptemp={};
uptemp['ranknum']=m;
uptemp['localsize']=size;
window.localStorage.setItem($("#down_bfule_tpfile").get(0).files[0].name,JSON.stringify(uptemp));
/*存儲(chǔ)完成*/
/*
$("#down_bfule_tpfile").get(0).files[0].slice 對(duì)選擇的文件進(jìn)行切割
(m-1)*ranksize 起始位置
m*ranksize 結(jié)束位置
*/
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,
/*
進(jìn)度條開(kāi)始
這是一種豎線方式 監(jiān)聽(tīng)progress，監(jiān)聽(tīng)每一片的上傳進(jìn)度
*/
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>片，當(dāng)前：第<span style='color:red'>"+m+"</span>片"+progressRate + "%")
});
return xhr
},
/*進(jìn)度條結(jié)束*/
success: function(result) {
if (result.error == "0000") {
$('.jdtis').html("全部上傳完成!");
//上傳完成，清除以前的分片存儲(chǔ)
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文件沒(méi)有上傳完 需要繼續(xù)上傳
uploadtp(m+1);
}else{
//php處理返回的錯(cuò)誤提示 比如長(zhǎng)時(shí)間沒(méi)有刷新頁(yè)面，導(dǎo)致已經(jīng)退出登陸了
alert(result.msg);
return false
}
}
/*
第2種 去掉上邊進(jìn)度條開(kāi)始 到結(jié)束的代碼，使用下面的success 代替上邊的success
根據(jù)上傳了多少片除以總數(shù) 顯示當(dāng)前的百分比 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文件沒(méi)有上傳完 需要繼續(xù)上傳
uploadtp(m+1);
}else{
//php處理返回的錯(cuò)誤提示 比如長(zhǎng)時(shí)間沒(méi)有刷新頁(yè)面，導(dǎo)致已經(jīng)退出登陸了
alert(result.msg);
return false
}
}
*/
})
}php后端處理程序
$filename=input('post.filename');//原始文件名
$size=input('post.size');//原始文件大小
//創(chuàng)建存放的文件夾
foreach($_FILES as $k=>$v){
//$v["tmp_name"]臨時(shí)文件 含路徑
$images_dir = '/public/upload/file/'.date("Ymd")."/";
if (!file_exists(ROOT_PATH."".$images_dir)) {
mkdir(ROOT_PATH."".$images_dir,0777);
}
$name = explode(".", $filename); //將上傳前的文件以“.”分開(kāi)取得文件類型 支持png jpg gif
$imgtype=strtolower($name[count($name)-1]);//類型轉(zhuǎn)成小寫(xiě)
$newname=date("YmdHis".rand(10000,99999)).".".$imgtype;//新的文件名
//file_put_contents 追加 注意有FILE_APPEND,不加的話會(huì)覆蓋原來(lái)的
//file_get_contents讀取內(nèi)容
file_put_contents(ROOT_PATH.$images_dir.$filename,file_get_contents($v["tmp_name"]),FILE_APPEND);
//判斷大小 是否已經(jīng)上傳完成
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));
}
}說(shuō)明：
nginx上傳文件很慢
處理辦法：關(guān)閉 fastcgi_request_buffering，如果不關(guān)閉，上傳所需時(shí)間至少是iis的2倍；
具體操作：編輯nginx.conf，
server {
fastcgi_request_buffering off;
}
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
