FormData()表单元素始终为空
我一直在尝试上传带有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
格式
上传文件的最好方法是不使用Ajax,但如果你想做到这一点,你可以按照属于教程:
http://blog.teamtreehouse.com/uploading-files-ajax
上传文件的最好方法是传统的方法,使用enctype="multipart/form-data"
刷新网站的形式,非常简单,但同样是最好的方式来做到这一点。
Regards
感谢Radames,你认为最好的方法是什么? –
Sergio,上传文件的最佳方式是使用enctype =“multipart/form-data”刷新网站的一种传统方法,它非常简单但同样是最好的方式。 –
好的。我试图不刷新页面,但我想我将不得不。谢谢! –
那么我需要在多部分/表格数据编码FormData。 –
好点,你试过了吗: var formData = new FormData(); formData.append('file',$('#fileI')。files [0]); – Craig
我看到你使用“c.append(”file“,$($(a).find(”#fileI“))[0]);”但不是额外的$()不必要? – Craig