今天用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...
File FileReader 可以干什么? Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL),2进制字符串(readAsBinaryString),文本(readAsText)并且都是异步的。 对了,Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成。 File 对象 File对象可以从 input[type=file].files 数组,和拖拽事件 event.dataTransfer.files 中获取到。 第一张图是 Chrome 下的 File 对象,第2个图是Firefox下的File...
腾讯微博也已近实现了拖拽上传。其实很简单。 由于没有服务器支持在文章里不能做上传演示,下载实例 拖拽上传需要什么支持 1:需要浏览器支持 drop 事件。(响应拖拽事件获取file对象); 2:XMLHttpRequest 对象有 sendAsBinary 方法(用于发送数据); 以上两个条件 目前仅有 firefox 能达到。 chrome 第一项达标,第2项可以使用 google.gears 来模拟。 所以能实现拖拽上传的浏览器 有 firefox3.6 + 和 chrome7+。 如何实现拖拽上传 1:绑...
如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述。前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结。先看一下总体视图:1、 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大)。可以用虚线框盒子等样式吸引用户拖拽文件。最好有明显的文字提示和图标配合。 2、 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向...
先看效果图(在FF下): 下面是我整个的思路: 一、用ajaxFileUpload.js异步上传图片。这个不用多说了,挺简单的东西。 二、div拖拽用jquery-ui。这个也不多说了。 三、上传过图片的处理。 编辑容器是300*300,如果图片不在300*300之内,这里会生成一个maxHeight=300,maxWidth=300的缩略图, 用于设置编辑容器的背景,如果原文件为123.jpg,这里生成的文件为123.jpg.view.jpg,当然,文件123.jpg.view.jpg可能不会生成! 返回数据...
js部分是这样的: 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片固定大小容器的高 //imgDiv 页面DIV的JQuery的id //imgType 数组后缀名 //*****...
1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin4. AjaxFileUpload5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数在服务器端支...
前面我写过一篇短小的文章,简要的介绍了下怎样定义input type="file" 的样式。对于一般的表单,上传控件较少,这样的做法确实不错,既减少了代码,又美化了样式,原文:《定义input type="file" 的样式》 其实要实现给file控件定义样式,大致思想都是一样的。 今天看到博客园的繁花连写两篇文章来研究file控件 《jquery.fileEveryWhere.js--一个跨浏览器的file显示插件》 《firefox下input type="file"的size是多大》 我这里也按捺...
官方地址:http://www.uploadify.com/ 脚本之家提供的下载地址:http://www.gxlcms.com/jiaoben/21484.html官方英文文档:http://www.uploadify.com/documentation/ 使用方法(.net版本): 前台JS 代码如下: $("#id").uploadify({ height: 30, swf: /uploadify/uploadify.swf, uploader: /Handler/uploadPic.ashx, width: 120, cancelImg: /uploadify/uploadify-cancel.png, buttonText: 选择图片, fileTypeExts: *.gif;*.jpg;*.jpe...
upload... #ui-upload-holder{ position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;} #ui-upload-input{ position:absolute;top:0px;right:0px;height:100%;cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:999;} #ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;} #ui-upload-filepath{ position:relative; bor...
文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果...//允许上传图片文件的大小 具体代码如下 代码如下: var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileE...
功能: 1.限制扩展名:只能jpg || jpg和gif 2.限制图片大小:K为单位 3.限制图片宽高:px为单位(要么都有,要么都无) 4.限制已经损坏的图片(没有预览的图片) 5.限制更改过扩展名的图片(比如强制把一个动态的GIF扩展名改为JPG了) 使用限制: 要在InputFile里增加onchange事件,使其选择文件后能在一个img标签里加载出来,否则使用会出错 imglimit.js 代码如下: function limitImg(){ var img=document.getElementById(argume...
久不出技术类文章,我都忘了自己是一程序员啦......今天写一点工作中遇到的东西,大家共同学习,反正也比较浅显了。弹出窗口 我们在工作中,经常会碰到弹出窗口类应用,有时候还需要一点遮盖层: 这类圆角弹出框其实用得还是很广泛的,用CSS3可以很容易的出现,但是考虑到浏览器兼容问题,这类还是需要用图片实现了 主要代码如下: 代码如下://弹出层剧中 function popup(popupName) { var _scrollHeight = $(document).scrollTop(...
JS代码 第一种: (display:none时不能用) 代码如下:var obj = document.getElementById(fileupload) ; obj.select(); document.execCommand("delete"); 第二种:(无论display:none或block都可以用) 代码如下:var obj = document.getElementById(fileupload) ; obj.outerHTML=obj.outerHTML;
请求的url: 代码如下: function request(url, onSuccess, paras, method, isAsync, isMask) { $.ajax({type:method,url:url,async:isAsync,data:paras,success:function(request){onSuccess(request,isMask);},error:function(e) {if(isMask) $(#div_mask).unblock();},beforeSend:function(e){if(isMask)$(#div_mask).block({message:});}}); } ajax 中同步或者异步请求url时,当要响应返回的请求,这是有个等待过程的。 代码...