基于JQuery实现图片上传预览与删除操作Word文件下载.docx

基于JQuery实现图片上传预览与删除操作Word文件下载.docx

《基于JQuery实现图片上传预览与删除操作Word文件下载.docx》由会员分享，可在线阅读，更多相关《基于JQuery实现图片上传预览与删除操作Word文件下载.docx（4页珍藏版）》请在冰豆网上搜索。

　　2.srdz.preview.2.0.css

　　.btn-pic{

display:

block;

position:

relative;

width:

120px;

height:

40px;

overflow:

hidden;

cursor:

pointer;

text-align:

center;

　　}

　　.btn-pic-bg{

border:

1pxsolid#ff9000;

background:

nonerepeatscroll00#ff9000;

color:

#ffffff;

text-decoration:

none;

　　.btn-picspan{

line-height:

39px;

　　.ipt-bg{

absolute;

top:

0;

left:

font-size:

100px;

opacity:

filter:

alpha（opacity=0）;

　　.spanc{

red;

　　.drt{

float:

right;

　　.dft{

left;

　　3.srdz.preview.2.0.js

　　functionImgPreview{}

　　ImgPreview.prototype.preview=function（options）{

vartime=newDate.getTime;

varfileid="

file"

+time;

varxdelid="

xdel"

vardelid="

del"

varviewid="

view"

varhtm="

+

"

上传图片"

删除图片"

;

$（"

#"

+options.previewid）.html（htm）;

+fileid）.bind（"

click"

function{

var$this=$（this）;

varbrowser={

isIE:

function（ver）{

varb=document.createElement（'

b'

）;

b.innerHTML='

'

returnb.getElementsByTagName（'

i'

）.length===1;

}

};

$this.change（function{

varregex=/（.*）\.（jpg|jpeg|png）$/;

varval=$this.val;

if（!

regex.test（val））{

+viewid）.html（"

请选择正确的图片（jpg、jpeg、png）!

return;

if（browser.isIE（6））{

HanderOther（$this）;

}elseif（browser.isIE（7）||browser.isIE（8）||browser.isIE（9））{

HanderIE789（$this）;

}elseif（window.FileReader）{

HanderFileReader（$this）;

}else{

该浏览器不支持预览图片!

functionHanderFileReader（$this）{

varoFReader=newwindow.FileReader,

rFilter=/^（?

:

image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump）$/i;

oFReader.onload=function（oFREvent）{

+xdelid）.show;

varaFiles=$this.get（0）.files;

if（aFiles.length==0）{return;

if（!

rFilter.test（aFiles[0].type））{ 

oFReader.readAsDataURL（aFiles[0]）;

functionHanderIE789（$this）{

if（options.width!

=null&

&

parseInt（options.width）>

0）{

+viewid）.css（"

width"

options.width+"

px"

"

378px"

if（options.height!

parseInt（options.height）>

height"

options.height+"

358px"

filter"

progid:

DXImageTransform.Microsoft.AlphaImageLoader（sizingMethod=scale,src='

+GetImgSrc（$this）+"

）"

functionHanderOther（$this）{

functionGetImgSrc（$this）{

$this.select;

$this.blur;

varimgSrc=document.selection.createRange.text;

document.selection.empty;

returnimgSrc;

//绑定按钮事件

+delid）.bind（"

if（browser.isIE（7）||browser.isIE（8）||browser.isIE（9））{

+fileid）.val（'

+xdelid）.hide;