[英]Submit form including file upload via jQuery ajax
HTML:
<input type="text" name="description">
<input type="file" name="image" accept=".jpg">
如何使用$.ajax
上传图像和文本值? 生成一个提交文本数据的对象没有问题,但不知道从哪里开始使用图像。
我使用PHP服务器端,因此在base64或类似方法中编码图像是完全可以接受的。
最简单的方法是使用FormData()
类:
所以现在你有一个FormData对象,随时可以与XMLHttpRequest一起发送。 并使用FormData Object附加字段
<script type="text/javascript">
$(document).ready(function () {
var form = $('form'); //valid form selector
form.on('submit', function (c) {
c.preventDefault();
var data = new FormData();
$.each($(':input', form ), function(i, fileds){
data.append($(fileds).attr('name'), $(fileds).val());
});
$.each($('input[type=file]',form )[0].files, function (i, file) {
data.append(file.name, file);
});
$.ajax({
url: '/post_url_here',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (c) {
//code here if you want to show any success message
}
});
return false;
});
})
</script>
并强制jQuery不为您添加Content-Type标头,否则,将缺少上传文件边界字符串。
使用jQuery表单js使用ajax上传图像。
检查https://github.com/malsup/form/
var options = {
url : 'url',
success : function(responseText) { "event after success "}
};
$(" form id ").ajaxSubmit(options);
并在PHP文件中获取图像并上传图像
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.