这几天在做一个图片上传的功能,说实话没想到这个功能用了我那么长的时间。
项目原来有图片上传功能,具体的做法是选择上传图片,弹出一个文件上传窗口,里面有几个文件上传按钮,选好要上传的文件后点击“上传”,文件上传到服务器,返回一个jsp页面,jsp页面自动执行在后台设定的js方法,将父窗口对应img标签的src属性修改。
现在要做改进,不通过弹出窗口,点击页面上的一个缩略图片,弹出文件选择,选择好文件后自动上传图片并将图片和对应大图显示为上传的图片。
刚开始我设想的很简单:
1. 在页面中加入隐藏input type="file"标签,定义其onchange事件
2. 定义缩略图的onclick事件,触发file的click事件
3. 定义uploadFile方法,使用ajaxUploadFile控件将文件上传
onchange方法触发本地图片预览方法,触发uploadFile方法
这样做在ff和chrome下都没有问题,但是在用ie浏览器测试的时候就不行了,原因是uploadFile方法执行时没有向后台发送数据,查了之后才知道原来ie浏览器为了安全性考虑对file上传只用鼠标点击file标签才会有效,通过js触发file标签的click方法行不通。
郁闷,ie太挫了
好吧,要改进也挺简单就是把file标签设成透明的,和img放在一起,并设置width,height把它撑大,这样点击图片的时候触发的实际上就是file标签的click事件了
这下文件向后台上传没问题了,但是用ie测试的时候还是出问题了,就是图片预览的时候我获取了file的本地路径,用js改变img的src属性出了个很奇怪的问题:有的图片可以显示,有的不能显示,而且不能显示的图片src修改后为空
网上查解决方法,说是用滤镜可以显示,
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {//火狐chrome...
img.style.backgroundImage = "url('" + evt.target.result + "')";
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
} else // 兼容IE
{
var imgSrc = document.selection.createRange().text;
img.src="";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod='scale')";
img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
试了下,显示倒是可以显示,但是图片角上有个红色的小叉号,怎么看怎么难看,不过功能倒是全了,先放着吧
另外还有一中解决方法就是用div的背景模拟img,这样可以用js修改div的backgroundImage的url来达到显示图片的效果,但是在ie下背景图片的大小无法控制,超级难看!
本地预览效果达不到,退而求其次,经过尝试先将图片上传上去,根据返回的url修改img的src可以达到效果(这个跟上面ie用js修改src属性方法一样,但是返回的是http://...jpg)
要注意一点
ajax获取servlet返回值如果文本中包含'&',在ajax中解析出来会是"$amp;"所以要处理一下。
分享到:
相关推荐
我们知道,常规情况下点击浏览按钮后,是无法将客户端的图片立即显示在页面上的,这里套用iframe来实现图片上传后立即在当前页面显示
.net点击上传按钮img显示上传的图片、 点击FileUpload上传按钮img显示上传的图片
图片上传后会显示压缩后的图片,点击压缩的图片会显示本来的图片。
点击上传图片,可以拖动图片上传,可以多选,上传完成,点击保存,即可在页面中显示; 显示图片的布局是以弹性盒布局为主,限制上传格式和上传图片大小,适合交作业demo
js功能,点击图片上传图片并显示,仅前端部分功能,简单功能
相关知识struts2,fileupload等,实现图片上传并生成缩略图。单文件上传,图片展示直接使用jQuery FancyBox,效果不错,值得初学者研究学习。
EXT 上传图片 删除图片,显示图片,PHP
因为目前浏览器不支持flash,导致phpcms后台上传图片按钮无法点击,试了很多浏览器都不行。这个方法操作简单,亲测快速有效,原理是将原来的上传图片插件更改为h5图片上传插件。
实现同时多图片上传,上传后分页显示图片,实现点击跳转
html 上传图片,实现拖拽文件上传,上传后页面显示图片信息,可以点击图片放大
2,按上传按钮后图片上传到服务器(目前用电脑内的硬盘代替),并显示图片索取的路径; 3,lvShowImage及imglist结合显示已上传的图片的缩略图;点击缩略图后可在PictureBox上重新显示已上传的图片。 4,点击界面上...
批量上传图片,可一次性选择不超过20张图片,可删除其中不想上传的图片,点击“开始上传”后,即可将图片上传到服务器,点击“全部插入”即可将图片显示在前台页面中。有益初学者,对批量上传文件及图片加深理解并...
批量上传图片,可一次性选择不超过20张图片,选择好后可以删除其中不想上传的图片,点击“开始上传”后,即可将图片上传到服务器,点击“全部插入”可把图片显示在前台的页面中。 http://bbs.ah580.com
点击图片实现更换头像的功能,并且可以得到上传图片的文件名,大小,类型。
一共有三层,页面,action和dao层,比较简单不分包了,直接放在在一个包里;还有一些封装,需要的就... 点击下载功能,从数据库中获取二进制流,然后将二进制流转换为图片类型,再在页面层显示; 具体的看各个类;
移动端点击图片会变成全屏查看的模式,然后可以进行手势缩放。微信端点击放大图片
jsp上传图片并生成缩略图example upload pictures and zoom it
1.webview file点击上传 2.转换图片base64显示图片 3.解决android版本不兼容问题 4.解决浏览取消,第二次浏览无效的问题
简单的登录注册(登录注册页面样式是一致的),图片的上传并显示。登录进去是相册的显示 可以添加相册,点击相册可以进行上传添加图片。
图片上传:点击“图片”按钮,然后选择”上传“,选择图片文件之后,再点击“上传到服务器”,即可在“图像”标签栏显示预览图像,可以在此调整尺寸大小等参数,点击“确定”即可插入进去,提交之后会显示图片,不用...