我一直在嘗試上傳帶有Ajax的文件,但FormData總是空的。FormData()表單元素始終爲空
這是我使用的代碼:
<html>
<head>
<link rel="stylesheet" href="../website/css/bootstrap.min.css">
</head>
<body>
<form id="providerForm">
<input id="fileI" class="form-control" name="fileI" type="file" />
<button id="newProviderButton" type="submit" class="btn btn-success"
value="Enviar">Enviar</button>
</form>
</body>
<script type="text/javascript"
src="https://code.jquery.com/jquery-latest.min.js"></script>
<script
src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script
src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script>
var providerId = "";
function newProvider() {
var a = $("#providerForm")[0];
var b = $("#providerForm");
var c = new FormData($(b)[0]);
var d = document.getElementById('providerForm');
var dataT = new FormData(d);
var params = $('#providerForm').serializeArray();
c.append("file",$($(a).find("#fileI"))[0]);
$.each(params, function(i, val) {
dataT.append(val.name, val.value);
console.log(val.name + ": " + val.value);
});
$.ajax({
type : "POST",
beforeSend : function(request) {
request.setRequestHeader("Content-Type",
"multipart/form-data");
},
url : "../services/user/profile/upload/image",
data : dataT,
cache : false,
contentType : false,
processData : false,
success : function(msg) {
if (msg.message == "OK") {
mAlert({
container : $("#providerForm"),
message : 'Usuario registrado correctamente',
type : 'success',
okButton : 'OK'
});
}
},
statusCode : {
401 : function() {
window.location.replace("../entrance.jsp");
}
}
});
}
$(document).ready(function() {
$("#providerForm").on('reset',function(){
$(this).data('formValidation').resetForm(true);
});
$('#providerForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {}
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
fv = $(e.target).data('formValidation');
// Do whatever you want here ...
// Then submit the form as usual
newProvider();
//fv.defaultSubmit();
});
});
</script>
</html>
你可以在這裏看到的結果。
正如你可以看到我試圖獲得HTML元素througt不同的方法,甚至追加元素單獨結果ID FORMDATA = {}
編輯:
我需要FORMDATA編碼multipart/form-data
格式
那麼我需要在多部分/表格數據編碼FormData。 –
好點,你試過了嗎: var formData = new FormData(); formData.append('file',$('#fileI')。files [0]); – Craig
我看到你使用「c.append(」file「,$($(a).find(」#fileI「))[0]);」但不是額外的$()不必要? – Craig