[英]jquery file upload using formData not working
我正在嘗試使用jquery對tar文件進行簡單的文件上傳。 但是我從服務器獲取了無效的存檔格式。 任何幫助,將不勝感激。
PS:我無法更改服務器代碼。 它來自另一個團隊。
<!DOCTYPE html>
<html>
<body>
<form method="POST" enctype="multipart/form-data" id="testFileUpload">
<input type="file" name="selectedFile"/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
</body>
</html>
我的JS:
$(document).ready(function () {
$("#btnSubmit").click(function (event) {
event.preventDefault();
var form = $('#testFileUpload')[0];
var data = new FormData(form);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: g_url_version+'/hosting/apps',
data: data,
processData: false,
contentType: false,
timeout: 600000,
beforeSend: function (xhr) {
xhr.setRequestHeader('X-Token-Id', getCookieToken());
xhr.setRequestHeader('X-Connector-Id', 'TestSeed');
},
success: function (data) {
console.log("SUCCESS : ", data);
},
error: function (e) {
console.log("ERROR : ", e);
}
});
});
});
綁定提交事件處理程序,而不是單擊按鈕,因為您需要阻止默認表單提交並發送手動ajax調用
$("#btnSubmit").click(function (event) {
至
$("#testFileUpload").on('submit', function(event) {
並簡單地使用this
來獲取表單對象
var form = this;
復制下面的代碼,如果您有一個簡單的php
文件,則應正確上傳文件
print_r($_POST);
print_r($_FILES);
它應該在控制台中顯示以下內容
SUCCESS : Array
(
[userid] => oemr@omer.com
[filelabel] =>
)
Array
(
[file] => Array
(
[name] => IMG_20160521_092941676.jpg
[type] => image/jpeg
[tmp_name] => F:\xampp\tmp\phpD881.tmp
[error] => 0
[size] => 4867779
)
)
$(document).ready(function() { $("#testFileUpload").on('submit', function(event) { event.preventDefault(); var form = this; var data = new FormData(form); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: g_url_version + '/hosting/apps', data: data, processData: false, contentType: false, timeout: 600000, beforeSend: function(xhr) { xhr.setRequestHeader('X-Token-Id', getCookieToken()); xhr.setRequestHeader('X-Connector-Id', 'TestSeed'); }, success: function(data) { console.log("SUCCESS : ", data); }, error: function(e) { console.log("ERROR : ", e); } }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="POST" enctype="multipart/form-data" id="testFileUpload"> <input type="file" name="selectedFile" /> <input type="submit" value="Submit" id="btnSubmit" /> </form>
您可以通過以下方式嘗試:將點擊處理程序更新為; jQuery的:
event.preventDefault();
var data = new FormData();
data.append("file",$('input[name="selectedFile"]').files[0]);
// your ajax call looks fine. Use the same.
$("#contactform").validate({
errorClass: "errors_lable",
rules: {
email: {
required: true,
email: true,
},
},
messages: {
email: {
required: "Please enter email address.",
email: "Please enter Valid email address.",
},
},
submitHandler: function(form) {
try {
var formData = new FormData();
formData.append("LogoName", $('input[type=file]')[0].files[0]);
formData.append("email", isCollege);
waitingDialog.show('Please Wait While Processing...');
$.ajax({
type: "POST",
dataType: 'JSON',
url: "https://code0.ww.com/index.php/...../RegisterSchool",
data: formData,
processData: false,
contentType: false,
success: function(data) {
waitingDialog.hide('Please Wait While Processing...');
if (data.ResponseHeader.response_type == 'success') {
// $('#msg').show();
// $('#msg').html("<span style='color:#b9efb9'><b>Thankyou For Register</b></span>");
alert('Thankyou For Register');
} else if (data.ResponseHeader.response_type == 'error') {
//$('#msg').show();
//$('#msg').html("<span style='color:red'><b>Opps! There is some error, Please Try again latter.</b></span>");
alert('Somithing Went Wrong Please Try Again Latter');
}
},
error: function(data) {
alert('Somithing Went Wrong Please Try Again Latter');
}
});
} catch (err) {
console.log(err);
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.