我不是前端开发人员,并且我花了相当多的时间尝试这样做。希望你们能帮助我。
我有一个将文件发送到服务器中的 API 的表单,如下所示:
<form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1">
<div class="inputFileCustom">
<input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
<label for="uploadFiles">
<div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
Choose a file
</div>
</label>
</div>
<input type="submit" value="Upload PDF" class="btn btn-primary" />
</form>
url/upload
返回一个 JSON,例如:
{ "status": "ok"/"fail" }
我需要两件事:
- 防止提交重定向到
url/upload
;
- 从服务器获取 JSON 响应,如果成功,则调用
loadFiles()
功能(已经在工作)。
我正在使用 javascriptloadFiles()
功能,但是非常简单。
您可以使用 jquery 表单处理程序,
<script>
// Attach a submit handler to the form
// Attach a submit handler to the form
$("#uploadForm").submit(function(event) {
var formData = new FormData();
formData.append("uploadFiles", $('[name="file"]')[0].files[0]);
event.stopPropagation();
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data) {
alert(data);
loadFiles()
}
});
return false;
});
</script>
参考这个堆栈溢出问题 https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)