jqueryformdata上傳
1. jQuery+ajax文件上傳失敗,什麼原因
大部分 都是超出了 伺服器的上傳大小限制
還有就是 ajax 上傳類型是否正確設置
vardata=newFormData();
data.append('file',$('input[type=file]')[0].files[0]);
$.ajax({
url:'ajax.php',
data:data,
processData:false,
type:'POST'
contentType:'multipart/form-data',
mimeType:'multipart/form-data',
success:function(data){
alert(data);
}
});
2. 如何用FormData實現多文件上傳
html代碼
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>多文件上傳</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var formData = new FormData();
for(var i=0; i<$('#file')[0].files.length;i++){
formData.append('file[]', $('#file')[0].files[i]);
}
$.ajax({
url: "test.php",
type: "POST",
processData: false,
contentType: false,
data: formData,
success: function(d){
}
});
});
})
</script>
</head>
<body>
<form>
<input type="file" multiple id="file" name="file[]" >
<input type="button" id="btn" value="提交"/>
</form>
</body>
test.PHP代碼:
<?php
var_mp($_FILES);die();
3. 如何使用multipart/form-data格式上傳文件
在網路編程過程中需要向伺服器上傳文件。Multipart/form-data是上傳文件的一種方式。
Multipart/form-data其實就是瀏覽器用表單上傳文件的方式。最常見的情境是:在寫郵件時,向郵件後添加附件,附件通常使用表單添加,也就是用multipart/form-data格式上傳到伺服器。
表單形式上傳附件
具體的步驟是怎樣的呢?
首先,客戶端和伺服器建立連接(TCP協議)。
第二,客戶端可以向伺服器端發送數據。因為上傳文件實質上也是向伺服器端發送請求。
第三,客戶端按照符合「multipart/form-data」的格式向伺服器端發送數據。
既然Multipart/form-data格式就是瀏覽器用表單提交數據的格式,我們就來看看文件經過瀏覽器編碼後是什麼樣子。
這行指出這個請求是「multipart/form-data」格式的,且「boundary」是 「---------------------------7db15a14291cce」這個字元串。
不難想像,「boundary」是用來隔開表單中不同部分數據的。例子中的表單就有 2 部分數據,用「boundary」隔開。「boundary」一般由系統隨機產生,但也可以簡單的用「-------------」來代替。
實際上,每部分數據的開頭都是由"--" + boundary開始,而不是由 boundary 開始。仔細看才能發現下面的開頭這段字元串實際上要比 boundary 多了個 「--」
緊接著 boundary 的是該部分數據的描述。
接下來才是數據。
「GIF」gif格式圖片的文件頭,可見,unknow1.gif確實是gif格式圖片。
在請求的最後,則是 "--" + boundary + "--" 表明表單的結束。
需要注意的是,在html協議中,用 「 」 換行,而不是 「 」。
下面的代碼片斷演示如何構造multipart/form-data格式數據,並上傳圖片到伺服器。
//---------------------------------------
// this is the demo code of using multipart/form-data to upload text and photos.
// -use WinInet APIs.
//
//
// connection handlers.
//
HRESULT hr;
HINTERNET m_hOpen;
HINTERNET m_hConnect;
HINTERNET m_hRequest;
//
// make connection.
//
...
//
// form the content.
//
std::wstring strBoundary = std::wstring(L"------------------");
std::wstring wstrHeader(L"Content-Type: multipart/form-data, boundary=");
wstrHeader += strBoundary;
HttpAddRequestHeaders(m_hRequest, wstrHeader.c_str(), DWORD(wstrHeader.size()), HTTP_ADDREQ_FLAG_ADD);
//
// "std::wstring strPhotoPath" is the name of photo to upload.
//
//
// uploaded photo form-part begin.
//
std::wstring strMultipartFirst(L"--");
strMultipartFirst += strBoundary;
strMultipartFirst += L" Content-Disposition: form-data; name="pic"; filename=";
strMultipartFirst += L""" + strPhotoPath + L""";
strMultipartFirst += L" Content-Type: image/jpeg ";
//
// "std::wstring strTextContent" is the text to uploaded.
//
//
// uploaded text form-part begin.
//
std::wstring strMultipartInter(L" --");
strMultipartInter += strBoundary;
strMultipartInter += L" Content-Disposition: form-data; name="status" ";
std::wstring wstrPostDataUrlEncode(CEncodeTool::Encode_Url(strTextContent));
// add text content to send.
strMultipartInter += wstrPostDataUrlEncode;
std::wstring strMultipartEnd(L" --");
strMultipartEnd += strBoundary;
strMultipartEnd += L"-- ";
//
// open photo file.
//
// ws2s(std::wstring)
// -transform "strPhotopath" from unicode to ansi.
std::ifstream *pstdofsPicInput = new std::ifstream;
pstdofsPicInput->open((ws2s(strPhotoPath)).c_str(), std::ios::binary|std::ios::in);
pstdofsPicInput->seekg(0, std::ios::end);
int nFileSize = pstdofsPicInput->tellg();
if(nPicFileLen == 0)
{
return E_ACCESSDENIED;
}
char *pchPicFileBuf = NULL;
try
{
pchPicFileBuf = new char[nPicFileLen];
}
catch(std::bad_alloc)
{
hr = E_FAIL;
}
if(FAILED(hr))
{
return hr;
}
pstdofsPicInput->seekg(0, std::ios::beg);
pstdofsPicInput->read(pchPicFileBuf, nPicFileLen);
if(pstdofsPicInput->bad())
{
pstdofsPicInput->close();
hr = E_FAIL;
}
delete pstdofsPicInput;
if(FAILED(hr))
{
return hr;
}
// Calculate the length of data to send.
std::string straMultipartFirst = CEncodeTool::ws2s(strMultipartFirst);
std::string straMultipartInter = CEncodeTool::ws2s(strMultipartInter);
std::string straMultipartEnd = CEncodeTool::ws2s(strMultipartEnd);
int cSendBufLen = straMultipartFirst.size() + nPicFileLen + straMultipartInter.size() + straMultipartEnd.size();
// Allocate the buffer to temporary store the data to send.
PCHAR pchSendBuf = new CHAR[cSendBufLen];
memcpy(pchSendBuf, straMultipartFirst.c_str(), straMultipartFirst.size());
memcpy(pchSendBuf + straMultipartFirst.size(), (const char *)pchPicFileBuf, nPicFileLen);
memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen, straMultipartInter.c_str(), straMultipartInter.size());
memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen + straMultipartInter.size(), straMultipartEnd.c_str(), straMultipartEnd.size());
//
// send the request data.
//
HttpSendRequest(m_hRequest, NULL, 0, (LPVOID)pchSendBuf, cSendBufLen)
4. jquery ajax 上傳文件怎麼搞
Query Ajax在web應用開發中很常用,它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法,接下來通過本文給大家介紹jquery ajax 上傳文件處理方式。
FormData對象
XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個」表單」.比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest寫的請求
XMLHttpRequest方式
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
其實jquery的ajax也可以支持到的,關鍵是設置:processData 和 contentType 。
ajax方式
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告訴jQuery不要去處理發送的數據
processData : false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType : false,
beforeSend:function(){
console.log("正在進行,請稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失敗");
}
},
error : function(responseStr) {
console.log("error");
}
});
5. 你好,構造FormData 上傳文件(用html5分塊了的)用ajax提交數據(不用jquery),伺服器端怎麼讀取數據啊
AJAX上傳的是POST方式,記得加上multipart/form-data
6. 火狐瀏覽器支持通過ajax使用formdata對象無刷新上傳文件嗎
這個沒有問題,常用的幾個瀏覽器都是支持的
有兩種方式可以創建一個FormData對象:
①創建一個空的FormData對象,然後使用append()方法向該對象里添加欄位
②使用HTML表單來初始化一個FormData對象
7. formdata怎麼用jquery上傳
processData設置為false。因為data值是FormData對象,不需要對數據做處理。
<form>標簽添加enctype="multipart/form-data"屬性。
cache設置為false,上傳文件不需要緩存。
contentType設置為false。因為是由<form>表單構造的FormData對象,且已經聲明了屬性enctype="multipart/form-data",所以這里設置為false。
8. 如何使用formData上傳file數組
可以用數組形式,我貼代碼了
html 部分
<li class="list-group-item disabled select-file-div">
<input type="file" multiple="true" class="input-sm clear-l-r-padding select-file" data-uploadtype="photo"/>
</li>
js部分
var i,
data = new FormData();
...
for (i = 0; i < $('.select-file').files.length; i++) {
data.append('file[]', this.files[i]);
}
...//省略代碼若干...在選擇完成後調用下面$.ajax$.ajax({
url: 'url'
type: "POST",
data: data,
dataType: 'json',
processData: false,// *重要,確認為false
contentType: false,
beforeSend: function () {
... },
success: function (res) {
console.log(res);
},
error: function (res) {
...}
});
php 部分 接收數組
$fileField='file';
$name = $_FILES$fileField;
$tmp_name = $_FILES[$fileField]['tmp_name'];
$size = $_FILES[$fileField]['size'];
$error = $_FILES[$fileField]['error'];
/ 如果是多個文件上傳則$file["name"]會是一個數組 /
if(is_Array($name)){
$errors=array();
/多個文件上傳則循環處理 , 這個循環只有檢查上傳文件的作用,並沒有真正上傳 /
for($i = 0; $i < count($name); $i++){
/設置文件信息 /
if($this->setFiles($name[$i],$tmp_name[$i],$size[$i],$error[$i] )) {
if(!$this->checkFileSize() || !$this->checkFileType()){
$errors[] = $this->getError();
$return=false;
}
}else{
$errors[] = $this->getError();
$return=false;
}
/ 如果有問題,則重新初使化屬性 /
if(!$return)
$this->setFiles();
}