这次项目用到了图片和文件上传到后台,刚开始用的form表单,但是有一点不好的,就是点击上传后会跳转到action页面,用户体验非常不舒服,所以就改为用ajax异步上传,现把我的心得上传如下:
1、form表单
<form action="http://localhost....." method="post" enctype="multipart/form-data">
<input type="file" id="fileId" name="image" value="请上传图片" />
<input type="hidden" id="hiddId" name="id" value="1"/>
<input type="button" id="submit" value="上传"/>
</form>
后台需要我上传image 和id (enctype="multipart/form-data"这个必须写)。
2、异步上传
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="fileId" name="image" value="请上传图片" />
<input type="hidden" id="hiddId" name="id" value="1"/>
<input type="button" id="submit" value="上传"/>
</form>
<script type="text/javascript">
$("#submit").click(function () {
var a = new FormData();
a.append("image", $("#fileId")[0].files[0]);
a.append("id", 1);
$.ajax({
url:"http://localhost.....",
xhrFields:{
withCredentials:true
},
type: "POST",
cache: false,
data: a,
processData: false,
contentType:false,
async: false,
success: function (result) {
}
//cache 上传文件不需要缓存,所以设置false
//processData 因为data值是FormData对象,不需要对数据处理
//contentType 因为是由form表单构造的FormData对象,且已声明了属性enctype,所以为false
})
})
</script>
好的,ok了,结束了,这就是关于我的项目中的文件、图片的异步上传和form表单上传,谢谢!