oracle如何上传图片,js实现上传图片之上传前预览图片

上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。

预览图片的js代码：

function setImagePreview(docObj,localImagId,imgObjPreview)

{

if(docObjfiles && docObjfiles[0])

{

//火狐下，直接设img属性

imgObjPreviewstyledisplay = 'block';

imgObjPreviewstylewidth = '300px';

imgObjPreviewstyleheight = '200px';

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

imgObjPreviewsrc = windowURLcreateObjectURL(docObjfiles[0]);

}

else

{

//IE下，使用滤镜

docObjselect();

var imgSrc = documentselectioncreateRange()text;

//必须设置初始大小

localImagIdstylewidth = "300px";

localImagIdstyleheight = "200px";

//图片异常的捕捉，防止用户修改后缀来伪造图片

try

{

localImagIdstylefilter="progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod=scale)";

localImagIdfiltersitem("DXImageTransformMicrosoftAlphaImageLoader")src = imgSrc;

}

catch(e)

{

alert("您上传的图片格式不正确，请重新选择!");

return false;

}

imgObjPreviewstyledisplay = 'none';

documentselectionempty();

}

return true;

}

fileupload控件及用来预览图片的image：

功能很简单，代码也很易懂，相信不用我多废话大家也能看懂吧。感觉写这样的文章，真的没啥好说的，不多说，还是把重点放在代码上吧。

oracle如何上传图片,js实现上传图片之上传前预览图片相关推荐

[ASP.NET2.0] asp.net在ie7中使用FileUpload上传前预览图片 [ZT]
asp.net在ie7中使用FileUpload上传前预览图片因为安全性问题,IE7禁用了image控件引用本地图片,为了这个问题郁闷了好几天,终于找到了解决方案,好东西要与大家分享,代码如下: 此 ...
使用FileUpload控件上传前预览图片
<table class="blue_table" cellpadding="0" cellspacing="0" border=&q ...
asp.net在ie7中使用FileUpload上传前预览图片
因为安全性问题,IE7禁用了image控件引用本地图片,为了这个问题郁闷了好几天,终于找到了解决方案,好东西要与大家分享,代码如下: 此段代码放于<head> ....</head& ...
ajax js图片上传到php,Ajax上传并预览图片（附代码）
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上 ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
上传图片，多图上传，预览功能，js原生无依赖
最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面: 另一种思路是,直接在本地 ...
微信公众平台上传和预览图片
1.在index.html中引入js文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js 2.通过config接口注入权限验证配置,进行微信认证: wx.c ...

oracle如何上传图片,js实现上传图片之上传前预览图片

oracle如何上传图片,js实现上传图片之上传前预览图片相关推荐

最新文章

热门文章