在深圳做项目的时候，需要一个用户上传头像预览的功能！是在网上找了好多，都不太满意。要么是flash的，要么是Ajax上传后返回图片路径的，要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能，还被我给翻了出来，在这里做个记录，方便自己以后用，也方便其他需要的朋友！ 代码很简单，如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
js代码： $(".head").change(function() { var val = $(this).val(); if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){ imgtype = false; alert(图片格式无效！); }else{ if (FileReader) { var reader = new FileReader(), file = this.files[0]; reader.onload = function(e) { var image = new Image(); image.src = e.target.result; image.onload=function(){ if(image.width > 128 || image.height > 128){ fill = false; alert...
将图片查询出来之后，还需要加一个查看大图的功能，于是就用js写了一个方法，然后在image的onmouseover事件中调用此方法，这样在鼠标悬浮在小图上面的时候，其大图就会自动的显示出来。 显示大图和隐藏大图的js代码： 代码如下:<script type="text/javascript"> //显示图片 function over(imgid,obj,imgbig) { //大图显示的最大尺寸 4比3的大小 400 300 maxwidth=400; maxheight=300; //显示 obj.style.display=""; imgbig.src=im...
代码如下:<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> <asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" /> 代码如下:<script type="text/javascript"> function setImagePreview() { var docObj = document.getElementById("ctl00_ContentMain_file_head"); var fileName = docObj.value; if (!fileName.match(/.jpg|.gif|.png|.bmp...
上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。预览图片的js代码： 代码如下:<script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObjfiles && docObjfiles[0]) { //火狐下，直接设img属性 imgObjPreviewstyle...
功能： 1.限制扩展名：只能jpg || jpg和gif 2.限制图片大小：K为单位 3.限制图片宽高：px为单位（要么都有，要么都无） 4.限制已经损坏的图片（没有预览的图片） 5.限制更改过扩展名的图片（比如强制把一个动态的GIF扩展名改为JPG了） 使用限制： 要在InputFile里增加onchange事件，使其选择文件后能在一个img标签里加载出来，否则使用会出错 imglimit.js 代码如下:function limitImg(){ var img=document.getElementById(argumen...
今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像。假如忽略此参数，滤镜将不会作用。 代码如下:<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.3ppt.com /"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title></title> <style type="text/c...
jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 代码如下:*/ function submit_upload_picture(){ var file = $(file_c).value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $(both_form).action="file!upload.action"; $(both_form).submit(); $(insert_img).sethtml(<img src="http://images.anjiwu.com/images/loading.gif"/>); $(displ...
最近也经常遇到浏览器兼容的问题，昨天遇到上传图片预览问题，发现IE8和火狐不能显示，弄了很久，早上终于解决了很高兴。故跟大家分享下，我也多是网上找的，自己总结的一下，希望对大家有点帮助。 我们一般根据IE6、IE7进行开发的时候写图片预览的代码是： 代码如下:document.getElementById("img").src = document.getElementById("file").value; 还有一种方式 代码如下:<div style="filter:progid:DXImageTransform....
先看看效果图吧： 机会难得，有点技术亮点，就一下子投入到功能开发中去了。在这一块的功能开发中，自己还是学到些不错的东西，其中一点就是，用户选择上传的图片，如何预览出来呢。网上找了些资料，最终采用如下方法： 代码如下:function (obj) { //logo上传添加事件 var logoimg = null; if (document.all) {//如果是IE情况下 obj.select(); logoimg = document.selection.createRange().text; //由于是采用滤镜的方式，所以要把...
代码如下:<style type="text/css"> #newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=images); } </style> <script type="text/javascript" language="javascript"> function PreviewImg(imgFile) { var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style....
前台: upload.htm 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>upload</title> <link href="upload.css" rel="Stylesheet" /> </head> <body> <form> <ul> <li> <button id="SubUpload" onclick="TSubmitUploadImageFile();return false;"> 确定上传</butt...
在我 上一篇帖子 （译文 ） 中，谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示，对于Internet Explorer 来说，当浏览器执行了数量过多的语句时就会停止执行脚本，而其他的浏览器，则是持续执行脚本超过一定时间的时候就会给出提示。而我们要探讨的核心问题，不是这些浏览器如果探测失控的脚本，而是我们如何才可以让脚本运行的更快一些，从而避免这些警告 。 脚本失控基本上有以下四个方面的原因： 在循环中执行了太多的操作...
javascript 图片预览 function preview(imgFile,num) { //预览代码，支持 IE6、IE7。 var newPreview = document.getElementById("preview1"); var t ; if(document.all) //IE t = imgFile.value; else t = imgFile.files[0].getAsDataURL(); //FF newPreview.style.backgroundImage = "url(" + t + ")";//imgFile.value; newPreview.style.width = "108px"; newPreview.style.height = "130px"; newPreview.style.dis...
以前不知道 file 控件也能使用 onchange,导致面试时失去良机。 <script> function yulan() { var fileext=document.form1.UpFile.value.substring(document.form1.UpFile.value.lastIndexOf("."),document.form1.UpFile.value.length) fileext=fileext.toLowerCase() if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&(fileext!='.bmp')) { alert("对不起，...