2018年5月15日10:42:05
今天完成一个小需求,属于后台web开发的功能:当用户点击按钮上传图片后,图片会上传服务器并显示出来。
【1】图片ajax异步上传
<script type="text/javascript">
//js 读取图片文件,限制长度宽度
function jsReadFiles(files) {
var width = 0;
var height = 0;
if (files.length) {
var file = files[0];
//alert("**********"+file.size);
//读取图片数据
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
//加载图片获取图片真实宽度和高度
var image = new Image();
image.οnlοad=function(){
width = image.width;
height = image.height;
if(width != 714){
//basic.alert("图片格式错误,上传尺寸的宽度必须为714,请重新上传图片!");
//$("#fileUpload").val(null);
//return ;
var formData = new FormData($("#fileUploadForm")[0]);
$.ajax({
url: '${contextPath}/public/previewPic' , /*这是处理文件上传的servlet*/
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
var json = JSON.parse(data);
alert("** 图片路径是:"+ json.imgUrl
+ "** 图片key是:"+ json.imgKey);
$("#display-img").attr("src",json.imgUrl);
},
error: function (returndata) {
alert(returndata);
}
});
}else if(width == 714){
if(height != 0){
basic.alert("格式正确,图片上传成功!");
}
}
};
image.src= data;
};
reader.readAsDataURL(file);
}
}
</script>
【2】页面显示图片
使用到<img>标签,将src属性设为图片服务器的返回url即可。
【3】formData
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest
来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype
属性设为multipart/form-data ,则会使用表单的submit()
方法来发送数据,从而,发送数据具有同样形式。这里使用formData将表单的文件作为数据流上传。
参考文章: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects