网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题;
使用jquery2.1版本,较老版本不支持异步文件上传功能;
表单代码:
<form id="fileUploadForm">
<input type="file" name="file" class="imageUpload"/>
<span id="commit">提交到服务器</span>
</form>
创建一个表单,里面包含一个file input
脚本代码:
function uploadFile() {
//将表单封装为一个formData对象
var formData = new FormData($('#fileUploadForm')[0]);
$.ajax({
url:'http://127.0.0.1:8080/image/',
type:'POST',
//将formData对象作为参数进行上传
data:formData,
contentType: false,
processData: false,
success:function (data) {
//文件上传成功后的处理
$('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')
}
})
}
$(function () {
//为提交按钮添加点击事件
$('#commit').click(function () {
uploadFile();
})
})
NOTE:提交按钮使用<button/> <input type="submit"/> 的情况下将会页面跳转,我使用的是<span/>元素:
<span id="commit" >提交到服务器</span>
这样进行文件上传就不会出现页面跳转,达到异步上传;