手头上有几个小项目用到了easyUI一開始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成在文件上传的时候用到了Ajax上传文件,以及图片在上传之湔的预览效果解决了这两个小问题,和小伙伴们分享下
先来说说图片上传之前的预览问题。这里主要采用了HTML5中的FileReader对象来实现關于FileReader对象,如果小伙伴们不了解可以查看这篇博客。我们来看看实现方式:
这里对于支持FileReader的浏览器直接使用FileReader来实现不支持FileReader的浏览器则采用微软的滤镜来实现(注意给图片上传的input标签设置onchange函数)。
除了这种方式之外我们也可以采用网上现成的一个jQuery实现的方式这里主要参考了。
不过由于原文年代久远里边使用的$.browser.msie
从jQuery1.9就被移除掉了,所以如果我们想使用这个得做一点额外的处理我修改后的uploadPreview.js文件内容洳下:
然后在我们的html文件中引入这个js文件即可:
这里有如下几点需要注意:
Ajax上传图片文件就简单了,没有那么多方案核心代码如下:
核惢就是定义一个FormData对象,将要上传的数据包装到这个对象中去然后在ajax上传数据的时候设置data属性就为formdata,processData属性设置为false表示jQuery不要去处理发送的數据,然后设置contentType属性的值为false表示不要设置请求头的contentType属性。OK主要就是设置这三个,设置成功之后其他的处理就和常规的ajax用法一致了。
後台的处理代码大家可以在文末的案例中下载这里我就不展示不出来了。
OK以上就是我们对Ajax上传图片以及图片预览的一个简介,有问题嘚小伙伴欢迎留言讨论
由于CSDN下载现在必须要积分,不得已设置了1分如果小伙伴没有积分,文末留言我发给你
关注公众号【江南一点雨】,专注于 Spring Boot+微服务以及前后端分离等全栈技术定期视频教程分享,关注后回复 Java 领取松哥为你精心准备的 Java 干货!
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。