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(); $(display_div).setstyle(display, block); $(upload_div).setstyl...
今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像。假如忽略此参数，滤镜将不会作用。 代码如下: #picshow { filter:progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale); width:88px; height:125px; } function upimg(imgfile) { var picshow = document.getelementbyid("picshow"); picshow.filters.item("dximagetransform.microsoft.alphaimageloader").s...
功能： 1.限制扩展名：只能jpg || jpg和gif 2.限制图片大小：K为单位 3.限制图片宽高：px为单位（要么都有，要么都无） 4.限制已经损坏的图片（没有预览的图片） 5.限制更改过扩展名的图片（比如强制把一个动态的GIF扩展名改为JPG了） 使用限制： 要在InputFile里增加onchange事件，使其选择文件后能在一个img标签里加载出来，否则使用会出错 imglimit.js 代码如下: function limitImg(){ var img=document.getElementById(argume...
上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。预览图片的js代码： 代码如下: function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObjfiles && docObjfiles[0]) { //火狐下，直接设img属性 imgObjPreviewstyledisplay = 'block'; imgObjPrevi...
代码如下: 代码如下: function setImagePreview() { var docObj = document.getElementById("ctl00_ContentMain_file_head"); var fileName = docObj.value; if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) { alert('您上传的图片格式不正确，请重新选择！'); return false; } var imgObjPreview = document.getElementById("preview"); if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性 imgObjPreview.style...
将图片查询出来之后，还需要加一个查看大图的功能，于是就用js写了一个方法，然后在image的onmouseover事件中调用此方法，这样在鼠标悬浮在小图上面的时候，其大图就会自动的显示出来。 显示大图和隐藏大图的js代码： 代码如下: //显示图片 function over(imgid,obj,imgbig) { //大图显示的最大尺寸 4比3的大小 400 300 maxwidth=400; maxheight=300; //显示 obj.style.display=""; imgbig.src=imgid.src; //1、宽和高都超过了，...
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; aler...
在深圳做项目的时候，需要一个用户上传头像预览的功能！是在网上找了好多，都不太满意。要么是flash的，要么是Ajax上传后返回图片路径的，要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能，还被我给翻了出来，在这里做个记录，方便自己以后用，也方便其他需要的朋友！ 代码很简单，如下：By：DragonDean//下面用于图片上传预览功能 function setImagePreview(avalue) { var docObj=document.getElementBy...
代码很简单，常见的图片格式均已加入验证之中，小伙伴们可以直接拿去用的。 废话少说，直接上代码代码如下: $(document).ready(function(){$("#form01").change( function(){var filepath=$("input[name='myFile']").val();var extStart=filepath.lastIndexOf(".");var ext=filepath.substring(extStart,filepath.length).toUpperCase();if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){alert("图片限于bmp...
论坛或者贴吧经常会需要分享很多图片，上传图片比较差的做法是上传到中央服务器上，中央服务器再转发给静态图片服务器。而这篇文章讲介绍如何使用plupload对上传过程进行优化，并绕过服务器直接批量上传图片到又拍云上的方法。本文集中会讲到以下几个重点：代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片...
本节我们将实现，用户上传图片，并将该图片在浏览器中显示出来。 这里我们要用到的外部模块是Felix Geisendrfer开发的node-formidable模块。它对解析上传的文件数据做了很好的抽象。 要安装这个外部模块，需在cmd下执行命令：代码如下: npm install formidable如果输出类似的信息就代表安装成功了：代码如下: npm info build Success: formidable@1.0.14安装成功后我们用request将其引入即可：代码如下: var formidable = require(...
关于File API这里就不详细解释了，小伙伴们自行度娘吧，来我们就要利用文件句柄来读取文件内容，这是通过FileReader来实现的，通过FileReader接口，我们可以异步地将文件内容加载到内存中，赋予某个js变量。代码如下: function getImgSrc(target, callback) {if (window.FileReader) {var oPreviewImg = null, oFReader = new window.FileReader();oFReader.onload = function (oFREvent) {oPreviewImg = new Image();var type = t...
本文实例讲述了js实现上传图片预览的方法。分享给大家供大家参考。具体实现方法如下：代码如下:function PreviewImage(imgFile) {var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);filextension=filextension.toLowerCase();if ((filextension!=.jpg)&&(filextension!=.gif)&&(filextension!=.jpeg)&&(filextension!=.png)&&(filextension!=.bmp)){alert("对不起，系统仅支持标准格...
本文实例讲述了JS上传图片前实现图片预览效果的方法。分享给大家供大家参考。具体实现方法如下：代码如下:JS上传图片前的图片预览效果var dFile = document.getElementById('myfile'); var dImg = document.getElementsByTagName('img')[0]; var dInfo = document.getElementById('info'); dFile.onchange = function(){if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');r...
本文实例讲述了js上传图片及预览功能。分享给大家供大家参考。具体分析如下： 参考了网上一些人代码写了一个上传图片及时预览的功能function DisplayImage(fileTag,imgTagId){ var allowExtention=".jpg.png.gif"; var extentionArr=fileTag.value.split('.'); var extention = extentionArr[extentionArr.length-1]; if(!(allowExtention.indexOf(extention)>-1)){ alert("Please upload image!"); }else{ //for adveced broswer(...