一般上传文件,不能像普通表单一样直接发送给服务器,可以借助插件轻松上传:jQuery-form.js
基本用法
html部分:
<!-- 加载需要的js文件 -->
<script type="text/javascript" src="./js/common/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/common/jQuery-form.js"></script>
<form id="fileForm" enctype="multipart/form-data">
<input type="file" id="uploadPic" name="file">
<button type="submit">提交</button>
</form>
js部分:
/* 文件改变时触发文件上传 */
$('#uploadPic').change(function(){
// 设置ajax参数
var options = {
//target: '#output', //把服务器返回的内容放入id为output的元素中
//beforeSubmit: showRequest, //提交前的回调函数
//url: url, //默认是form的action, 如果申明,则会覆盖
//clearForm: true, //成功提交后,清除所有表单元素的值
//resetForm: true, //成功提交后,重置所有表单元素的值
//timeout: 3000, //限制请求的时间,当请求大于3秒后,跳出请求
url : 请求地址,
type: 请求方式,
headers:{
请求头参数设置
},
success: function (res) {
if (res.status==200) {
alert('上传成功!');
}else if(res.status == 404){
location.href="../404.html";
}else if(res.status == 403){
window.location.href="../../index.html";
}else{
console.log('上传失败');
}
}
}
// 提交表单
$('#fileForm').ajaxSubmit(options);
return false;
})