phpajax文件上傳
A. php上傳圖片那個怎麼做到前台直接提示上傳成功的啊ajax 怎麼得到上傳的臨時文件名
上傳圖片這個處理有幾個思路：
1、使用form提交到當前頁面的iframe（空內容）中。
2、使用form提交數據到使用js新建的iframe里。
3、直接通過js新建form、新建iframe，提交、接收伺服器端返回的響應。（這個網上找的插件可以看到，如fileuploader）
4、使用FormData對象（有些瀏覽器不兼容）
獲取臨時文件名，只需執行提交後echo 數據出來，前台接收到即可。
B. 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() 兩個介面獲取上傳的文件。
C. ajax如何 實現 文件上傳
程序說明
使用說明
實例化時，第一個必要參數是file控制項對象：
newQuickUpload(file);
第二個可選參數用來設置系統的默認屬性，包括
屬性: 默認值//說明
parameter:{},//參數對象
action:"",//設置action
timeout:0,//設置超時(秒為單位)
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
還提供了以下方法：
upload：執行上傳操作；
stop：停止上傳操作；
dispose：銷毀程序。
varQuickUpload=function(file,options){
this.file=$$(file);
this._sending=false;//是否正在上傳
this._timer=null;//定時器
this._iframe=null;//iframe對象
this._form=null;//form對象
this._inputs={};//input對象
this._fFINISH=null;//完成執行函數
$$.extend(this,this._setOptions(options));
};
QuickUpload._counter=1;
QuickUpload.prototype={
//設置默認屬性
_setOptions:function(options){
this.options={//默認值
action:"",//設置action
timeout:0,//設置超時(秒為單位)
parameter:{},//參數對象
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
};
return$$.extend(this.options,options||{});
},
//上傳文件
upload:function(){
//停止上一次上傳
this.stop();
//沒有文件返回
if(!this.file||!this.file.value)return;
//可能在onReady中修改相關屬性所以放前面
this.onReady();
//設置iframe,form和表單控制項
this._setIframe();
this._setForm();
this._setInput();
//設置超時
if(this.timeout>0){
this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);
}
//開始上傳
this._form.submit();
this._sending=true;
},
//設置iframe
_setIframe:function(){
if(!this._iframe){
//創建iframe
variframename="QUICKUPLOAD_"+QuickUpload._counter++,
iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");
iframe.name=iframename;
iframe.style.display="none";
//記錄完成程序方便移除
varfinish=this._fFINISH=$$F.bind(this._finish,this);
//iframe載入完後執行完成程序
if($$B.ie){
iframe.attachEvent("onload",finish);
}else{
iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;
}
//插入body
varbody=document.body;body.insertBefore(iframe,body.childNodes[0]);
this._iframe=iframe;
}
},
//設置form
_setForm:function(){
if(!this._form){
varform=document.createElement('form'),file=this.file;
//設置屬性
$$.extend(form,{
target:this._iframe.name,method:"post",encoding:"multipart/form-data"
});
//設置樣式
$$D.setStyle(form,{
padding:0,margin:0,border:0,
backgroundColor:"transparent",display:"inline"
});
//提交前去掉form
file.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));
//插入form
file.parentNode.insertBefore(form,file).appendChild(file);
this._form=form;
}
//action可能會修改
this._form.action=this.action;
},
//設置input
_setInput:function(){
varform=this._form,oldInputs=this._inputs,newInputs={},name;
//設置input
for(nameinthis.parameter){
varinput=form[name];
if(!input){
//如果沒有對應input新建一個
input=document.createElement("input");
input.name=name;input.type="hidden";
form.appendChild(input);
}
input.value=this.parameter[name];
//記錄當前input
newInputs[name]=input;
//刪除已有記錄
deleteoldInputs[name];
}
//移除無用input
for(nameinoldInputs){form.removeChild(oldInputs[name]);}
//保存當前input
this._inputs=newInputs;
},
//停止上傳
stop:function(){
if(this._sending){
this._sending=false;
clearTimeout(this._timer);
//重置iframe
if($$B.opera){//opera通過設置src會有問題
this._removeIframe();
}else{
this._iframe.src="";
}
this.onStop();
}
},
//銷毀程序
dispose:function(){
this._sending=false;
clearTimeout(this._timer);
//清除iframe
if($$B.firefox){
setTimeout($$F.bind(this._removeIframe,this),0);
}else{
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom關聯
this._inputs=this._fFINISH=this.file=null;
},
//清除iframe
_removeIframe:function(){
if(this._iframe){
variframe=this._iframe;
$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);
document.body.removeChild(iframe);this._iframe=null;
}
},
//清除form
_removeForm:function(){
if(this._form){
varform=this._form,parent=form.parentNode;
if(parent){
parent.insertBefore(this.file,form);parent.removeChild(form);
}
this._form=this._inputs=null;
}
},
//超時函數
_timeout:function(){
if(this._sending){this._sending=false;this.stop();this.onTimeout();}
},
//完成函數
_finish:function(){
if(this._sending){this._sending=false;this.onFinish(this._iframe);}
}
}
D. 我做php的，ajax傳值亂碼，亂碼都是這種方式：%u5BB4，以%u開頭的！請問怎麼解決呀
JQuery在Ajax提交出現中文亂碼的解決辦法：
因為編碼的原因
可能存在以下幾點原因：
1.HTML的編碼不統一：如頁面用的GB2312，好像JQuery對它支持不太好。以前我一直都是用UTF-8的，一直都沒有發現；
2.文件的編碼，這個不好在
表面上看到，簡體中文版的操作系統存的文本格式的文件默認是 GB2312，建議把文件換成UTF-8格式的
最簡單的解決辦法，把提交的中文文本用 JS的 escape 處理一下，就不會現出現亂碼了。
如：
//保存數據
$.ajax({
url:"/guide/savecomments.aspx" ,
type:"POST" ,
dataType:"json" ,
data:"Action=SaveComment&CommNickName=" +escape
(CommNickName.val()) + "&CommContent=" +escape(CommContent.val()) + "&GuideID=" + GuideID.val() + "&ScoreLogType=<%=ScoreLogType %>",
success:function
(results){
alert(results.message);
}
});
E. 大神，ThinkPHP 上傳文件進度條怎麼實現的
Web Uploader
這個插件是網路出的，有進度條，兼容ie7及以上。
原理就是ajax上傳，會返回1-100的數值，根據這個值來操作進度條。如果還有不明白的話，你可以在後盾人看看視頻找找答案，有空多看看時間長了，慢慢就明白了，希望能幫到你，給個採納吧謝謝
F. php 使用ajaxfileupload無法接收文件
既然你都在php頁面列印$_FILE沒有值說明沒有數據上傳到php文件。
ajax上傳文件:
$(document).ready(function(){
$('#test').click(function(){
$.ajaxFileUpload({
url:'接收路徑',
secureuri:false,
fileElementId:'file',
dataType:'text',//返回數據類型
success:function(data,status){
//alert(data);
$("#img").attr("src","圖片地址
);
},
error:function(data,status,e)//伺服器響應失敗處理函數
{
alert(e);
}
});
//$('#upload').submit();
});
});
G. html中input上傳圖片什麼原理啊php後台怎麼處理如果用ajax的話是傳些什麼
用input上傳圖片是把圖片作為文件傳輸的，在php後台中使用 $_FILES來接收。
注意：前端的form表單除了action ,method 屬性外，還要添加一個'enctype'屬性，否則文件傳輸不成功。
<form enctype="multipart/form-data">
<input type="file" >
</form>
$_FILES接收信息 有幾個屬性：
name , 上傳的文件名稱
size ,上傳的文件大小
tmp_name ,臨時路徑
type ,文件類型
error錯誤提示
error取值說明：
( 0:沒問題。1/2：大小超過限制[1->超出php.ini限制。2->超出文件域max_file限制]。3：只上傳部分附件(不好測試）。4：沒有上傳附件）
有上傳信息時：$_FILES接收到的附件信息：
保存附件：把上傳的文件由臨時路徑保存到真實的圖片存儲的位置。
move_uploaded_file(臨時路徑名附件，真實路徑名附件）
H. 一個php表單中先上傳文件然後獲取路徑通過表單上傳到資料庫
//不要把這個問題想的太復雜,上傳文件跟其他數據完全可以一起提交到伺服器，為什麼一定要先上傳圖片，返回結果再提交其他欄位呢，這不是給自己找麻煩嗎：
<formactionmethod='post'>
<inputname='username'type='text'/>
<inputtype='file'name='image'/>
<inputtype='submit'name='submit'/>
<form>
Server.php:
$file=$_FILES['image'];這個就是你上傳的文件,先保存在伺服器,再和其他欄位一起保存到資料庫即可
$username=$_POST['username'];
$sql=//...
I. php上傳文件如何實現上傳頭像的時候可以顯示出頭像
兩種方案：
前端直接使用 FileReader可以直接讀取圖片在前端顯示，可以在用戶點擊確定後再通過 ajax上傳到後端（當然，你也可以直接通過 form表單 submit提交)
用戶點擊上傳文件的時候，直接用 ajax把圖片是傳到後端，後端回傳圖片在伺服器中的地址，前端把這個圖片顯示出來。
J. ajax+html實現文件上傳有哪幾種方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>大文件切割上傳</title>
<link rel="stylesheet" href="">
<script>
function selfile(){
const LENGTH = 1024 * 1024 * 10;//每次上傳的大小
var file = document.getElementsByName('video')[0].files[0];//文件對象
var filename=document.getElementsByName('video')[0].files[0].name;
var totalSize = file.size;//文件總大小
var start = 0;//每次上傳的開始位元組
var end = start + LENGTH;//每次上傳的結尾位元組
var fd = null//創建表單數據對象
var blob = null;//二進制對象
var xhr = null;//xhr對象
while(start < totalSize){
fd = new FormData();//每一次需要重新創建
xhr = new XMLHttpRequest();//需要每次創建並設置參數
xhr.open('POST','upload.php',false);
blob = file.slice(start,end);//根據長度截取每次需要上傳的數據
fd.append('video',blob);//添加數據到fd對象中
fd.append('filename',filename); //獲取文件的名稱
xhr.send(fd);//將fd數據上傳
//重新設置開始和結尾
start = end;
end = start + LENGTH;
}
}
</script>
</head>
<body>
<h1>大文件切割上傳</h1>
<input type="file" name="video" onchange="selfile();" />
</body>
</html>