图片上传

今天在学习Web 的时候,做个一个图片文件上传的小结;
在web开发中实现文件上传功能,需要完成2个步骤操作:
1.在页面中获取需要上传的资源;
2.在控制台中servlet读取上传的文件资源,并把文件保存到本地数据库

标签用于在web页面中添加图片文件上传输入项,设置图片文件上传输入项要时刻注意; 1.必须设置type值,否则浏览器无法读取到文件,type值为”file”文件; 2.允许上传图片的类型:”image/jpg,image/png,image/jpeg,image/gif,image/bmp” or”image/*”;一定要加上,不然上传的突破无法确定类型!

标签要放在div里面包着,用于拼装选择到的图片,”src”图片的链接;”alt”提示为图片;”style”设置图片的样式(大小);

创建FileReader对象

var imgReader = new FileReader();

正则表达式 过滤图片文件
var regexImageFliter = /^(!:image/jpg|image/png|image/jpeg|image/gif|image/bmp)$/i;
一定要对图片进行正则表达式处理,让图片按照指定的格式上传,不然后面的保存就不稳定,等于给自己挖坑!再在后面显示图片的时候就怕他文件类型后缀变了;难写显示转换!
//file表单改变事件，将选择的图片显示到img元素

function showImgToView(inputFileId) {

  //选择图片文件

  var imgFile = $("#" + inputFileId).get(0).files[0];

  //console.log(imgFile);

  //判断上传文件是否为图片格式

  if (!regexImageFilter.test(imgFile.type)) {

      layer.msg("请选择有效的图片文件", { icon: 0, title: "提示" });
  }
  else {
            imgReader.readAsDataURL(imgFile);
  }

}

先在img元素中给个双击事件，在双击事件的方法里写个点击事件，把文件选择器给点开，然后创建FileReader对象，并且写个正则表达式来限制上传的文件为图片文件，在文件选择器里写个改变事件的方法，最后是图片的加载事件的方法把图片绑定到img标签的src属性上这样就可以达到图片的上传预览效果

实现效果如下: