ajaxphp上傳進度條

❶ thinkphp3.2.3上傳文件顯示進度

因為上述操作包含了上傳文件的操作，而普通ajax無法實現文件上傳，經過網路有使用FormData對象與插件這兩種方法，詳見前一篇轉載的博文，於是我就嘗試了一下FormData對象的方法。
情景：我要利用thinkPHP3.2.3框架實現增加商品時對其輸入數漏橋據合法性的驗證之後到前台提示如搜首，一開始是通過內置的跳轉函數實現的跳轉提示，會跳到一個頁面顯示再返回，這樣給人的視覺體驗很不好，於是想修改為ajax方式來實現非同步更渣數新數據而不刷新此頁面，也不離開此頁面，而是通過alert彈出警告框來提示用戶輸入數據的合法性與否。因為商品的表單數據中包含文件，所以一開始使用ajax時使用jquery內置的收集數據的方法：$("form").serialize(); 但是它不支持文件數據的收集，於是網路後就嘗試使用FormData加上ajax來實現表單的非同步提交並實現文件的上傳。
首先在控制器就要修改執行成功或失敗時的跳轉函數，如

$this->success('添加成功！',U('listGoods'),true);
$this->error('添加失敗！',U('add'),true);
細心的同學應該發現了跟以前寫的有不同之處吧，就是多給了一個參數，默認是false,設置為true時表明表單是使用ajax提交的，從而不執行跳轉，而是返回json格式的數據如下：

{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":1,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}
{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":0,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}
這樣就可以在前台的ajax執行的success回調函數內部獲取數據，status=1表示成功，status=0表示失敗。
一開始使用的方法代碼如下：

function testAjax(){
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
url:"__SELF__",
type:"post",
data:formData,
dataType: 'json',
processData:false,// 告訴jQuery不要去處理發送的數據
contentType:false,// 告訴jQuery不要去設置Content-Type請求頭
success:function(data){
window.clearInterval(timer);
console.log("over...");
//判斷是否添加成功
if(data.status == 1){
alert(data.info);
location.href = data.url;
}
else{
alert(data);
}

},
error:function(e){
alert("錯誤");
window.clearInterval(timer);
}
});
get();//此處為上傳文件的進度條
}
正常情況下是不跳轉的，但是我猜應該是使用了FormData對象的緣故，導致ajax執行回調函數後，一直自行跳到一個空白界面顯 示返回的json格式的提示信息。這樣的效果顯然不是我要的，於是就開始測試，看到底是哪裡出錯了，最後發現確實沒法控制它， 正一籌莫展時突然發現現在使用的是綁定了提交按鈕的onclick事件，我猜會不會是這個原因，反正改一下也沒關系，於是將其改成 限制通過按鈕提交表單的方法來實現果然不自行跳轉了，真的激動啊！！這時明白最關鍵原因應該跟FormData無關了，其實就是提 交方式的原因導致的。

❷ php 文件上傳，如何實現進度條功能

用flash文件上傳插件
如：http://ke..com/view/1332553.html?wtp=tt
php創始者也寫了一個php的擴展可以實現，麻煩，不如flash上傳插件簡單，qq，的相冊都用flash傳

❸ PHP進度條

解決思路：

任務分兩種，一個是總進度，也就是任務隊列，用一個array保存起來

還有一個就是任務的進度，如，當前任務完成了多少

用一個參數來指示當前進度，如currentTask，再用兩個參數來指示當前正在執行任務的任務進度，比如導出數據，用begin和end來表示當前導出的是從begin到end之間的記錄數

每次任務執行完之後再把begin和end同時在加上增量，再讓瀏覽器跳轉一下，這樣就可以調到下一步繼續執行了，每當在執行當前任務結束時，將CurrentTask向後指示，繼續任務隊列中的任務

以上用到的參數都是用querystring來保存的，包括任務隊列信息，也可以用臨時文件來保存

❹ 在php中,如何應用ajax實現等待進度條功能

jquery 有好多進度條方式的效果的。。你可以參考。

❺ PHP 如何用ajax做文件上傳

通過傳統的form表單提交的方式上傳文件：
[html] view plain 在CODE上查看代碼片派生到我的代碼片<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
<h1 >測試通過Rest介面上傳文件 </h1>
<p >指定文件名： <input type ="text" name="filename" /></p>
<p >上傳文件： <input type ="file" name="file" /></p>
<p >關鍵字1： <input type ="text" name="keyword" /></p>
<p >關鍵字2： <input type ="text" name="keyword" /></p>
<p >關鍵字3： <input type ="text" name="keyword" /></p>
<input type ="submit" value="上傳"/>
</form>
不過傳統的form表單提交會導致頁面刷新，但是在有些情況下，我們不希望頁面被刷新，這種時候我們都是使用Ajax的方式進行請求的。
Ajax的方式進行請求：
[javascript] view plain 在CODE上查看代碼片派生到我的代碼片$.ajax({
url : "http://localhost:8080/STS/rest/user",type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
},
error : function(data) {
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);}
});
通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後台。這用jQuery的方法來說，就是serialize。
通過$('#postForm').serialize()可以對form表單進行序列化，從而將form表單中的所有參數傳遞到服務端。
但是上述方式，只能傳遞一般的參數，上傳文件的文件流是無法被序列化並傳遞的。
不過如今主流瀏覽器都開始支持一個叫做FormData的對象，有了這個FormData，我們就可以輕松地使用Ajax方式進行文件上傳了。
關於FormData及其用法
FormData是什麼呢？我們來看看Mozilla上的介紹。
XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
參見：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormDataConstructor
FormData()
想得到一個FormData對象：
var formdata = new FormData();
W3c草案提供了三種方案來獲取或修改FormData。
方案1：創建一個空的FormData對象，然後再用append方法逐個添加鍵值對：
var formdata = new FormData();
formdata.append("name", "呵呵");
formdata.append("url", "http://www..com/");方案2：取得form元素對象，將它作為參數傳入FormData對象中！
var formobj = document.getElementById("form");var formdata = new FormData(formobj);
方案3：利用form元素對象的getFormData方法生成它！
var formobj = document.getElementById("form");var formdata = formobj.getFormData()
Method
FormData.append
本方法用於向已存在的鍵添加新的值，如該鍵不存在，新建之。
語法
formData.append(name, value);
formData.append(name, value, filename);
注: 通過 FormData.append()方法賦給欄位的值若是數字會被自動轉換為字元(欄位的值可以是一個Blob對象,一個File對象,或者一個字元串,剩下其他類型的值都會被自動轉換成字元串).
參數解釋
name
鍵 (key)， 對應表單域
value
表單域的值
filename (optional)
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".
FormData.delete
將一對鍵和值從 FormData 對象中刪除。
formData.delete(username);
FormData.get
返回給定鍵的第一個值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username); // "Justin"
FormData.getAll
返回給定鍵的所有值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.getAll(username); // ["Justin", "Chris"]
FormData.has
檢查是否包含給定鍵，返回 true 或 false
formData.has(username);
FormData.set
設置給定鍵的值
formData.set(name, value);
formData.set(name, value, filename);
瀏覽器兼容情況
來自 MDN：
Desktop
FeatureChromeFirfox(Gecko)Intenet ExplorerOperaSafariBasic support7+4.0(2.0)10+12+5+
append with filename(Yes)22.0(22.0)???
delete, get, getAll, has, setBehind FlagNot supportedNot supported(Yes)Not supportedMobile
FeatureAndroidChrome AndroidFirfox Mobile (Gecko)Firfox OS (Gecko)IE MobileOpera MobileSafari MobileBasic support3.0?4.0(2.0)1.0.1?12+?
append with filename??22.0(22.0)1.2???
delete, get, getAll, has, set(Yes)(Yes)Not supportedNot supportedNot supported(Yes)Not supported2015年06月04日發布
Ajax通過FormData上傳文件
1.使用<form>表單初始化FormData對象方式上傳文件HTML代碼
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
javascript代碼
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
這里要注意幾點：
processData設置為false。因為data值是FormData對象，不需要對數據做處理。
<form>標簽添加enctype="multipart/form-data"屬性。
cache設置為false，上傳文件不需要緩存。
contentType設置為false，不設置contentType值，因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false。
上傳後，伺服器端代碼需要使用從查詢參數名為file獲取文件輸入流對象，因為<input>中聲明的是name="file"。
如果不是用<form>表單構造FormData對象又該怎麼做呢？
2.使用FormData對象添加欄位方式上傳文件
HTML代碼
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
這里沒有<form>標簽，也沒有enctype="multipart/form-data"屬性。
javascript代碼
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
這里有幾處不一樣：
append()的第二個參數應是文件對象，即$('#file')[0].files[0]。
contentType也要設置為『false』。
從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標簽能夠上傳多個文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。
3.伺服器端讀文件
從Servlet 3.0 開始，可以通過 request.getPart() 或 request.getPars() 兩個介面獲取上傳的文件。

❻ ajaxSubmit做文件上傳為什麼在IE中進度條無反應

IE無解，不支持，Progress是html5 xhr對象的新屬性，不知道IE10支持formdata沒有。岩圓。棗慧
uploadify應該是兼容性最好的了，flash實現，不過臭屁的ios不支持。。
折中的辦法就凳棗答是判斷是否ie，是ie就用uploadify，其他瀏覽器用jquery.form.js

❼ ajax+php實現進度顯示是怎麼實現的

寫個PHP，訪問時輸出當前的進度百分比。前台javascript發ajax訪問這謹悄個PHP，解析數字修改前台某元素寬度
這要是看不懂那就沒辦法只好祥陸渣上個垃圾代碼供你參考了
loop.php

for($i=0;$i<1000;$i++){
do_something();
file_put_contents("progress.log",$i);
}

ajax.php

echo file_get_contents("悉仔progress.log")

❽ 如何使用ajax做進度條進度信息如何返回

AJAX進度條一般不能反應真實進度（我只是說一般，你所見到的都是偽進度條），其原因就是因為這樣做簡單，而且用戶體驗還不錯，x0dx0a實現方法如下：x0dx0a點擊按鈕或者幹嘛幹嘛一觸發這個事件的時候，讓進度條燃正 從 0% 緩慢/迅速 增長到 20%。x0dx0abeforeSend 觸發一個事件，讓進度條 從20% 緩慢碰孝/迅速 增長到50%。x0dx0acomplete（狀態）觸發，進度條到 80%。x0dx0a將AJAX回調數據處理完成，進度到100%。x0dx0ax0dx0a------------------------------x0dx0a如果有更高層次要求的話，比如上傳進度，要用偵聽，每隔1秒或者多少毫秒提交一次AJAX請求來查詢進度。比如上傳之前，先把文件大小（假設100MB）保存在伺服器上的某個Session或者變數里，上傳的臨時文件大小（假設某次提交偵聽請求時，已經上傳了5MB），兩個數值一除，5%就出來了。。皮吵悔。

❾ php如何實現上傳文件顯示上傳進度百分比

程序需要php的apc模塊的支持，關鍵點就是在上傳的form里添加一個hidden的inpu標簽，裡面要有name為
APC_UPLOAD_PROGRESS的屬性，value值為一個隨機數一遍多個人上傳。

apc模塊的安裝方法是，下載php_apc.dll放到ext文件夾下，在php.ini文件里添加
upload_max_filesize =100M
apc.rfc1867 = on
apc.max_file_size = 100M
extension=php_apc.dll
然後測試配置是否成功：
if(apc_fetch)
{echo "apc is working"}
else{echo "apc is not supported!";}

❿ 大神，ThinkPHP 上傳文件進度條怎麼實現的

Web Uploader
這個插件是網路出的，有進度條，兼容ie7及以上。
原理就是ajax上傳，會返回1-100的數值，根據這個值來操作進度條。如果還有不明白的話，你可以在後盾人看看視頻找找答案，有空多看看時間長了，慢慢就明白了，希望能幫到你，給個採納吧謝謝