- 浏览: 665427 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (173)
- ajax (4)
- ant (4)
- css (14)
- eclipse (1)
- exe4j (0)
- hibernate (7)
- html (29)
- http (2)
- install4j (0)
- java (35)
- javascript (31)
- jdbc (1)
- jquery (2)
- jsp (15)
- linux命令 (8)
- ooad (2)
- properties (3)
- servlet (1)
- spring (3)
- struts (6)
- swing (4)
- thread (2)
- version_control (1)
- webservice (4)
- xml (4)
- 数据库 (19)
- 正则表达式 (5)
- 其他 (16)
- 面试题 (1)
- 框架 (9)
- maven (1)
- util (29)
- 设计模式 (1)
最新评论
-
herodie4444:
看起来好像不难。
Java Struts2创建Excel文件并实现文件下载 -
心轨翼:
Java遍历Set集合方法 -
魔鬼的献祭:
...
java的web开发分页工具类 -
Nmxszxsl:
能发一个没有被墙的代码到我的邮箱吗?万分感谢。54365156 ...
Google翻译post提交无长度限制的在线翻译例子 -
782763595:
...
jar包混淆器介绍
本地、远程图片上传预览,带文件类型检查等功能,更多功能等待仔细研究发现。
参考:
http://blog.sina.com.cn/s/blog_4f9ef4770100glha.html
<title>文件上传前台控制检测程序 v0.6</title> <style> body,td{font-size:12px;} </style> <script language=javascript> var ImgObj=new Image();//建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性 //以下为限制变量 var AllowExt=".jpg|.gif|.doc|.txt|"//允许上传的文件类型 ŀ为无限制 每个扩展名后边要加一个"|" 小写字母表示 //var AllowExt=0 var AllowImgFileSize=70;//允许上传图片文件的大小 0为无限制 单位:KB var AllowImgWidth=500;//允许上传的图片的宽度 ŀ为无限制 单位:px(像素) var AllowImgHeight=500;//允许上传的图片的高度 ŀ为无限制 单位:px(像素) HasChecked=false; function CheckProperty(obj)//检测图像属性 { FileObj=obj; if(ErrMsg!="")//检测是否为正确的图像文件 返回出错信息并重置 { ShowMsg(ErrMsg,false); return false;//返回 } if(ImgObj.readyState!="complete")//如果图像是未加载完成进行循环检测 { setTimeout("CheckProperty(FileObj)",500); return false; } ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小 ImgWidth=ImgObj.width//取得图片的宽度 ImgHeight=ImgObj.height;//取得图片的高度 FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px"; FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb"; FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt; if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件,当前图片宽度为"+ImgWidth+"px"; if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件,当前图片高度为"+ImgHeight+"px"; if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+ImgFileSize+"KB"; if(ErrMsg!="") ShowMsg(ErrMsg,false); else ShowMsg(FileMsg,true); } ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'} function ShowMsg(msg,tf)//显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容 { msg=msg.replace("\n","<li>"); msg=msg.replace(/\n/gi,"<li>"); if(!tf) { document.all.UploadButton.disabled=true; FileObj.outerHTML=FileObj.outerHTML; MsgList.innerHTML=msg; HasChecked=false; } else { document.all.UploadButton.disabled=false; if(IsImg) PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>" else PreviewImg.innerHTML="非图片文件"; MsgList.innerHTML=msg; HasChecked=true; } } function CheckExt(obj) { ErrMsg=""; FileMsg=""; FileObj=obj; IsImg=false; HasChecked=false; PreviewImg.innerHTML="预览区"; if(obj.value=="")return false; MsgList.innerHTML="文件信息处理中..."; document.all.UploadButton.disabled=true; FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1)//判断文件类型是否允许上传 { ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件,当前文件类型为"+FileExt; ShowMsg(ErrMsg,false); return false; } if(AllImgExt.indexOf(FileExt+"|")!=-1)//如果图片文件,则进行图片信息处理 { IsImg=true; ImgObj.src=obj.value; CheckProperty(obj); return false; } else { FileMsg="\n文件扩展名:"+FileExt; ShowMsg(FileMsg,true); } } function SwitchUpType(tf) { if(tf) str='<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;">' else str='<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">' document.all.file1.outerHTML=str; document.all.UploadButton.disabled=true; MsgList.innerHTML=""; } </script> <form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;"> <fieldset style="width: 372; height: 60;padding:2px;"> <legend><font color="#FF0000">图片来源</font></legend> <input type="radio" name="radio1" checked onclick="SwitchUpType(true);">本地<input type="radio" name="radio1" onclick="SwitchUpType(false);">远程:<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;"> <input type="submit" id="UploadButton" value="开始上传" disabled><br> <div style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;"> <table border="0"><tr><td width="60" id="PreviewImg">预览区</td><td id="MsgList" valign="top"></td></tr></table> </div> </fieldset> </form>
参考:
http://blog.sina.com.cn/s/blog_4f9ef4770100glha.html
发表评论
-
java前后台字符串编码转换
2016-12-15 15:52 807此文为应用中遇到字符串编码转换问题网上找资料解决问题记录笔记, ... -
JavaScript replace字符串替换函数的用法
2016-10-19 15:21 879replace 语法 stringObj.replace(rg ... -
JS前端DES加密参数
2016-07-08 14:27 11738DES加密为可解密的机制,这里使用DES进行加密方便后台解密还 ... -
JS Date函数整理
2015-01-30 10:43 1072JS Date 对象用于处理日期和时间。 创建 Date 对象 ... -
js中setInterval与setTimeout用法
2014-11-19 17:09 1033下面详述js中的延时任务与周期任务的实现。 1.setTim ... -
转 js中数据类型判断(转)
2012-11-05 11:07 1143转载自: http://www.cnblogs.com/yjh ... -
包含日期和时间的选择器(转)
2012-09-27 16:11 1101转载自: http://www.cnblogs.com/swe ... -
jsp通用分页实现脚本
2012-09-26 17:12 1706工具脚本使用时只需替换url的问号前半部分即可。 此页面需要j ... -
Java过滤html标签
2012-09-21 09:54 1814方法一: String oldStr="< ... -
Web项目设置页面不缓存
2012-08-04 19:55 2896htm网页 <meta http-equiv=&qu ... -
javascript判断变量是否全为数字
2012-03-11 17:09 1124function isNumber(value){//校验 ... -
JS动态创建表格(转)
2012-01-06 18:40 1181目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号 ... -
ajax设置请求头发送带中文参数
2011-12-30 11:08 6555这里举个删除文件的ajax例子说明设置请求头,允许文件名带中文 ... -
扩充js的Array对象添加contains函数
2011-12-22 11:33 1552用js实现数组包含函数,在与ligerUI同时使用时,第一种方 ... -
ajax请求带中文url的参数转码解码
2011-12-13 10:56 3741js提交ajax请求,默认编码方式是ISO-8859-1,此编 ... -
CSS模块化设计——从空格谈起
2011-12-06 12:00 1014引子: 今天在蓝点看 ... -
html框架页面文档声明
2011-12-06 10:55 2205通俗地讲,文档类型声明(Document Type Decl ... -
图片上传预览
2011-11-23 18:31 1410支持IE和FireFox,动态添加图片。 <!DOC ... -
修改 input file 的按钮值
2011-11-23 14:32 3924在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解 ... -
Struts2中表单与Action传递数据三种方式(转)
2011-11-18 09:51 17971.Action中的属性与表单中的属性一致就可以 JSP ...
相关推荐
5. **显示预览**:将生成的Data URL赋值给img标签的src属性,显示预览图片。 6. **处理上传**:用户确认预览无误后,可以将原始文件或缩略图数据URL发送到服务器进行存储或进一步处理。 需要注意的是,这个过程...
4. **插入图片**:插件自动将上传成功的图片URL插入到编辑器内容中,用户可以直接预览和编辑。 在压缩包文件中,"fck"可能包含了以下内容: - `fckeditor` 文件夹:这是FCKeditor的源代码,包含JavaScript和CSS...
5. **跨域问题**:如果预览图片需要从远程服务器获取,可能会遇到跨域问题。可以通过设置服务器的CORS策略或者使用JSONP等方式解决。 6. **安全性考虑**:虽然Base64编码可以方便地在前端展示图片,但它并不能防止...
综上所述,实现“上传预览文字水印图片水印”功能,需要结合前端的文件操作API、预览展示技术,后端的文件接收、处理和存储,以及可能的SSH远程操作。每个环节都涉及多方面的技术和安全考虑,确保了用户上传文件的...
预览图片" /> ``` ##### 4.2 JavaScript 逻辑 ```javascript document.getElementById('fileInput').addEventListener('change', function(event) { var file = event.target.files[0]; if (file) { // 根据...
它允许用户输入图片的URL,系统自动下载并保存到本地,这样用户就不必先下载图片到本地再进行上传。这个功能涉及到网络请求和爬虫技术,通常使用HTTP库(如Python的requests)来发送GET请求获取远程资源,或者使用...
在预览图片时,我们可以使用`FileReader`对象的`readAsDataURL()`方法将文件读取为DataURL,然后将其设置为图像元素的`src`属性,实现预览效果。 6. **jQuery插件**:虽然描述中没有明确提到,但实现拖放上传预览...
"Java Web使用pdf.js在线预览远程服务器上的pdf文件"这个主题涵盖了如何利用pdf.js库实现在Web环境中流畅、安全地预览PDF文档。pdf.js是Mozilla开发的一个开源项目,它允许开发者在浏览器端直接渲染PDF内容,无需...
【Delphi WEB打印服务】是基于Delphi开发的一款高级打印解决方案,它允许用户通过API请求进行打印设计、预览和实际打印操作,无论是本地还是远程环境都能轻松应对。这一技术在C#编程语言中同样适用,可以为C#开发者...
然而,有时候用户可能会遇到MarkdownPad2无法预览的问题,这可能是由于软件设置、插件冲突或是依赖库不兼容等原因导致的。 针对"无法预览"的问题,我们可以尝试以下几种解决方案: 1. **检查设置**:首先,确保...
在本示例中,我们专注于使用C# WinForm创建一个功能,该功能能够在线上传、浏览和删除FTP服务器上的图片。WinForm是.NET Framework提供的一种用户界面设计工具,它允许开发者构建桌面应用程序。 FTP(File Transfer...
通常情况下,我们需要将图片上传到服务器,并保存图片的远程路径到小程序端,以便后续能够通过远程路径获取图片。 具体到代码实现,首先定义了Page的初始数据,其中包含了用于存放图片路径的数组imgs。选择图片的...
在JAVA工程中,你可能需要创建一个Servlet来处理ckfinder的请求,这个Servlet会处理文件的上传、删除、预览等操作。ckfinder的配置文件(如`config.php`或`config.js`)需要根据实际环境进行调整,包括设置服务器...
在这个版本中,FCKeditor集成了远程图片保存功能,允许用户上传并保存图片到服务器,而不仅仅限于在本地计算机上的资源。 在ASP.NET中集成FCKeditor 2.5.1,开发者可以利用C#和.NET框架的强大功能,创建一个交互性...
4. **远程保存**:远程保存意味着图片不是存储在本地服务器,而是上传到云存储服务,如阿里云OSS、AWS S3或Google Cloud Storage。这通常涉及到API调用,包括上传、设置权限和生成访问URL等操作。源码可能展示了如何...
在实际开发中,你可能会遇到各种需求,例如读取和显示图片、上传图片并预览、筛选指定分辨率的图片,或者在GUI应用中选择并显示本地图片。这些功能都可以通过Pillow和其他相关的Python库(如matplotlib、tkinter等)...
- "上传"通常指的是将本地文件发送到远程服务器。这需要HTTP客户端库,如HttpClient,发起POST请求,将图片文件作为二进制数据上传。在C#中,需要处理文件流,设置合适的请求头,如Content-Type。 7. **异常处理**...
3. **HTML5图片上传**:HTML5的File API允许用户选择本地文件,并在上传前进行预览。`<input type="file">`标签可以用来让用户选择文件,配合`onchange`事件可以监听文件的选择。通过FileReader对象,可以读取文件...
这是因为这些浏览器不允许直接访问本地文件系统,所以需要将文件上传到服务器,服务器处理后再返回预览的图片数据。 【预览模式的选择】 ImagePreview类在初始化时会根据浏览器类型自动设置预览模式。这个模式的...
本文将深入探讨如何利用基于BrowserSync的Gulpfile设置,将本地开发的资产(如CSS、JavaScript、图片等)注入到一个远程网站中。这种方式极大地提高了前端开发者的效率,因为他们可以在本地进行修改并实时看到在远程...