- 浏览: 1476678 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (691)
- linux (207)
- shell (33)
- java (42)
- 其他 (22)
- javascript (33)
- cloud (16)
- python (33)
- c (48)
- sql (12)
- 工具 (6)
- 缓存 (16)
- ubuntu (7)
- perl (3)
- lua (2)
- 超级有用 (2)
- 服务器 (2)
- mac (22)
- nginx (34)
- php (2)
- 内核 (2)
- gdb (13)
- ICTCLAS (2)
- mac android (0)
- unix (1)
- android (1)
- vim (1)
- epoll (1)
- ios (21)
- mysql (3)
- systemtap (1)
- 算法 (2)
- 汇编 (2)
- arm (3)
- 我的数据结构 (8)
- websocket (12)
- hadoop (5)
- thrift (2)
- hbase (1)
- graphviz (1)
- redis (1)
- raspberry (2)
- qemu (31)
- opencv (4)
- socket (1)
- opengl (1)
- ibeacons (1)
- emacs (6)
- openstack (24)
- docker (1)
- webrtc (11)
- angularjs (2)
- neutron (23)
- jslinux (18)
- 网络 (13)
- tap (9)
- tensorflow (8)
- nlu (4)
- asm.js (5)
- sip (3)
- xl2tp (5)
- conda (1)
- emscripten (6)
- ffmpeg (10)
- srt (1)
- wasm (5)
- bert (3)
- kaldi (4)
- 知识图谱 (1)
最新评论
-
wahahachuang8:
我喜欢代码简洁易读,服务稳定的推送服务,前段时间研究了一下go ...
websocket的helloworld -
q114687576:
http://www.blue-zero.com/WebSoc ...
websocket的helloworld -
zhaoyanzimm:
感谢您的分享,给我提供了很大的帮助,在使用过程中发现了一个问题 ...
nginx的helloworld模块的helloworld -
haoningabc:
leebyte 写道太NB了,期待早日用上Killinux!么 ...
qemu+emacs+gdb调试内核 -
leebyte:
太NB了,期待早日用上Killinux!
qemu+emacs+gdb调试内核
测试
news.sohu.com
news.sina.com.cn
news.163.com
sina和163的没有jquery
所以先加这行代码
保存到收藏夹
在把下面代码保存成一行,也保存到收藏夹
new.163.com
依次点完两个收藏夹之后
页面的最下面出现3个按钮
最后生成图片预览和图片大小
----------------------------
其他
test1.html
test2.html
------------------
会出现页面变形的问题
如果是sohu的可以使用
news.sohu.com
news.sina.com.cn
news.163.com
sina和163的没有jquery
所以先加这行代码
javascript:document.body.innerHTML +="<scri"+"pt type='text/javasc"+"ript' src='http://js.sohu.com/library/jquery1.3.2.js'></scr"+"ipt>";
保存到收藏夹
在把下面代码保存成一行,也保存到收藏夹
javascript: document.body.innerHTML +="<scri"+"pt type='text/javasc"+"ript'>var oldimgcount=$('img').size();;function getNewsSohuComImg_hao(thisurl,thisid){$('#picdiv').html(thisurl+';'+$('#picdiv').html());}function createImgPic_haonn(){var imgarray=$('#picdiv').text();imgarray=imgarray.split(';');var tmpstr='';for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />';$('#picdiv').html(tmpstr);}}function countImgSize_haonn(){$('img').each(function(index){if(index>=oldimgcount){$('#jieguo').html($(this).attr('src')+' width:'+$(this).width()+' height:'+$(this).height()+'</br>'+$('#jieguo').html());}});}function countImgUrl_haonn(){for(var thisi=0;thisi<$('img').size();thisi++){var ull=$('img').eq(thisi).attr('src');getNewsSohuComImg_hao(ull,'haohao'+thisi);}}</scri"+"pt>"; document.body.innerHTML +="<hr /><input type='button' onclick='countImgUrl_haonn()' value='提取url'/>"; document.body.innerHTML += "<input type='button' onclick='createImgPic_haonn()' value='生成图片'/>"; document.body.innerHTML +="<input type='button' onclick='countImgSize_haonn()' value='判断大小'/>"; document.body.innerHTML +="<div id='jieguo'></div>"; document.body.innerHTML +="<div id='picdiv'></div>";
new.163.com
依次点完两个收藏夹之后
页面的最下面出现3个按钮
最后生成图片预览和图片大小
----------------------------
其他
test1.html
<html> <head> <title>mytest</title> </head> <body> <script type="text/javascript" src="http://js.sohu.com/library/jquery1.3.2.js" ></script> <img src="http://ww1.sinaimg.cn/large/67b98b3djw1dptmqg51lbj.jpg" width="100" height="100" style="width:100;height:100"/> <img src="http://ww2.sinaimg.cn/large/6966d53egw1dptmcb4663j.jpg" width="100" height="100" style="width:100;height:100"/> </body> </html> <script type="text/javascript"> $("body").append("<hr /><input type='button' onclick='countImgUrl_haonn()' value='提取url'/>"); $("body").append("<input type='button' onclick='createImgPic_haonn()' value='生成图片'/>"); $("body").append("<input type='button' onclick='countImgSize_haonn()' value='判断大小'/>"); $("body").append("<div id='jieguo'></div>"); $("body").append("<div id='picdiv'></div>"); //$("body").append("<scri"+"pt type='text/javascript'>alert('haha');</scri"+"pt>"); //-----------下面代码不要有注释----生成一行给test2.html var oldimgcount=$('img').size(); function getNewsSohuComImg_hao(thisurl,thisid){ $('#picdiv').html(thisurl+';'+$('#picdiv').html()); } function createImgPic_haonn(){ var imgarray=$('#picdiv').text(); imgarray=imgarray.split(';'); var tmpstr=''; for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){ tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />'; $('#picdiv').html(tmpstr); } } function countImgSize_haonn(){ $('img').each(function(index){ if(index>=oldimgcount){ $('#jieguo').html($(this).attr('src')+'---width:'+$(this).width()+',height:'+$(this).height()+'</br>'+$('#jieguo').html()); } }); } function countImgUrl_haonn(){ for(var thisi=0;thisi<$('img').size();thisi++){ var ull=$('img').eq(thisi).attr('src'); getNewsSohuComImg_hao(ull,'haohao'+thisi); } } </script>
test2.html
<html> <head> <title>mytest</title> <script type="text/javascript" src="http://js.sohu.com/library/jquery1.3.2.js" ></script> </head> <body> <img src="http://ww1.sinaimg.cn/large/67b98b3djw1dptmqg51lbj.jpg" width="100" height="100" style="width:100;height:100"/> <img src="http://ww2.sinaimg.cn/large/6966d53egw1dptmcb4663j.jpg" width="100" height="100" style="width:100;height:100"/> </body> </html> <script type="text/javascript"> // document.body.innerHTML +="<scri"+"pt type='text/javasc"+"ript' src='http://js.sohu.com/library/jquery1.3.2.js'></scr"+"ipt>"; $("body").append("<scri"+"pt type='text/javasc"+"ript'>var oldimgcount=$('img').size();function getNewsSohuComImg_hao(thisurl,thisid){$('#picdiv').html(thisurl+';'+$('#picdiv').html());}function createImgPic_haonn(){var imgarray=$('#picdiv').text();imgarray=imgarray.split(';');var tmpstr='';for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />';$('#picdiv').html(tmpstr);}}function countImgSize_haonn(){$('img').each(function(index){if(index>=oldimgcount){$('#jieguo').html($(this).attr('src')+'---width:'+$(this).width()+',height:'+$(this).height()+'</br>'+$('#jieguo').html());}});}function countImgUrl_haonn(){for(var thisi=0;thisi<$('img').size();thisi++){var ull=$('img').eq(thisi).attr('src');getNewsSohuComImg_hao(ull,'haohao'+thisi);}}</scri"+"pt>"); $("body").append("<hr /><input type='button' onclick='countImgUrl_haonn()' value='提取url'/>"); $("body").append("<input type='button' onclick='createImgPic_haonn()' value='生成图片'/>"); $("body").append("<input type='button' onclick='countImgSize_haonn()' value='判断大小'/>"); $("body").append("<div id='jieguo'></div>"); $("body").append("<div id='picdiv'></div>"); </script>
------------------
会出现页面变形的问题
如果是sohu的可以使用
javascript:$("body").append("<scri"+"pt type='text/javasc"+"ript'>var oldimgcount=$('img').size();;function getNewsSohuComImg_hao(thisurl,thisid){$('#picdiv').html(thisurl+';'+$('#picdiv').html());}function createImgPic_haonn(){var imgarray=$('#picdiv').text();imgarray=imgarray.split(';');var tmpstr='';for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />';$('#picdiv').html(tmpstr);}}function countImgSize_haonn(){$('img').each(function(index){if(index>=oldimgcount){$('#jieguo').html($(this).attr('src')+' width:'+$(this).width()+' height:'+$(this).height()+'</br>'+$('#jieguo').html());}});}function countImgUrl_haonn(){for(var thisi=0;thisi<$('img').size();thisi++){var ull=$('img').eq(thisi).attr('src');getNewsSohuComImg_hao(ull,'haohao'+thisi);}}</scri"+"pt>");$("body").append("<hr /><input type='button' onclick='countImgUrl_haonn()' value='text0'/>");$("body").append("<input type='button' onclick='createImgPic_haonn()' value='text1'/>");$("body").append("<input type='button' onclick='countImgSize_haonn()' value='text2'/>");$("body").append("<div id='jieguo'></div>");$("body").append("<div id='picdiv'></div>");
发表评论
-
indexedDB存图片减少请求
2020-05-21 19:23 557getImageFile()获取网络图片 showImage ... -
vizceral-example的例子
2020-03-19 18:53 355自定义图和加载结构 代码在 https://github.c ... -
jsonpath的helloworld
2020-03-17 14:58 411基本语法:https://www.cnblogs.com/jp ... -
流动图神器vizceral
2019-10-12 19:04 508把c的代码生成json:https://github.com/ ... -
emscripten asm.js的helloworld
2018-03-01 20:15 1108mac下安装: brew install SDL2 SDL2_ ... -
websocket上传文件
2016-12-15 13:30 4475nginx的上传 查看http://haoningabc.it ... -
webpack的helloworld
2016-11-02 10:42 913参考 http://www.jianshu.com/p/42e ... -
iphone6等移动端的css自适应
2016-10-17 01:18 1214参考 http://jingyan.baidu.com/art ... -
javascript自定义事件
2016-06-01 21:49 554一言不合上代码 <input value=" ... -
html5的fiesystem api 浏览器本地存储
2016-06-01 15:59 922html5的fiesystem api可以存取本地文件 一言不 ... -
websocket传传图片
2015-12-25 17:51 7245参考[url]http://www.adobe.com/dev ... -
angularjs使用include后双向绑定失败的解决
2015-12-20 19:41 1869原理参考 http://segmentfault.com/q/ ... -
html5 陀螺仪
2014-11-26 21:05 5872<html> <head> ... -
webgl的贝塞尔曲线
2014-11-12 00:56 2533BezierCurve webgl的贝塞尔曲线 webgl ... -
chrome app的helloworld
2014-11-11 13:56 717参考 http://blog.csdn.net/rydiy/a ... -
shader and Program编程基本概念 - 转
2014-11-04 11:50 1534原地址:http://blog.csdn.net/myarro ... -
javascript对象转json
2014-10-17 14:09 1010<html> <head>& ... -
jquery 的svg中国地图
2012-12-16 14:37 28096三种吧 1.d3.js很强大 2.jquery的 jvecto ... -
纯css的树型结构
2012-10-03 18:29 1280<html><head> ... -
D3 的3d图
2012-09-16 17:05 1458LCF http://mathworld.wolfram. ...
相关推荐
接着,代码还包含了对图片大小的验证。这主要通过获取图片的尺寸(高度和宽度)和文件大小来进行。首先,创建一个新的`Image`对象,并设置其源为上传的图片路径。然后,通过`Image`对象的属性`height`、`width`和`...
在JavaScript中,对用户上传的图片进行大小验证是常见的需求,尤其在网页应用中,确保图片大小在合理范围内可以优化加载速度,节省服务器资源。这个"JS上传图片大小验证.rar"压缩包可能包含了一个实现此类功能的示例...
// 验证图片大小不超过MaxSize if (ImageSource.Size.Width > MaxSize || ImageSource.Size.Height > MaxSize) { MessageBox.Show("图片大小超过限制,请重新选择!"); ImageSource = null; } else { ...
在代码中,我们还可以看到一个用于验证图片大小和格式的逻辑。如果图片大小超过 5M 或格式不正确,将会弹出一个警告框,提示用户上传正确的图片。 知识点5:JQuery 的使用 在代码中,我们可以看到 JQuery 的使用。...
在前台验证图片大小时,我们通常会限制用户上传图片的最大尺寸,比如100KB。实现时,首先会在文件输入框上绑定一个change事件,当用户选择文件后,该事件被触发。 在事件处理函数中,首先获取用户选中的图片文件...
// 验证图片大小 if (file.getSize() > 1024 * 1024 * 5) { // 限制为5MB return new ResponseEntity("图片过大,请上传不超过5MB的图片", HttpStatus.BAD_REQUEST); } // 验证图片格式 String fileName = ...
这个“JS验证图片格式 有预览功能”的主题主要关注如何利用JavaScript来检查用户上传的文件是否为合法的图片格式,并提供实时预览功能。以下将详细介绍这一技术实现的关键知识点。 1. **文件输入事件(File Input ...
首先,我们可以采用两种策略来验证图片大小: 1) 后台处理:通过AJAX将图片上传到服务器,然后在服务器端计算图片大小并进行处理。这种方法虽然可以准确判断图片大小,但如果文件过大,用户需要等待较长时间,效率...
同时,可能会有验证图片大小、类型等限制,以确保上传的图片符合服务器的要求。 6. **Web**:标签中的"Web"表明这是Web应用的一部分,可能涉及到HTML、CSS、JavaScript与.NET后端的交互。前端使用AJAX技术发送文件...
6. **用户体验**:为了让用户有更好的交互体验,可以添加一些前端验证,如JavaScript验证图片大小和格式,减少服务器的压力。另外,使用AJAX异步上传图片可以提供无刷新的上传体验。 7. **优化**:在生产环境中,...
1. **图片大小限制**: - **原因**:图片过大可能导致上传时间过长,增加服务器存储负担,甚至可能导致内存溢出等问题。 - **限制方式**:通常通过设置上传文件的最大尺寸(如KB或MB)来控制。例如,可以设定为2MB...
例如,用户通过网站上传图片时,系统应能实时接收并验证图片大小、格式,以防止恶意大文件占用服务器资源。接下来,为了减少存储空间和加快页面加载速度,图片通常会被压缩。这可以使用各种库如ImageMagick或Python...
在ASP.NET中,虽然主要工作是在客户端完成的,但后端也可以提供一些辅助功能,比如验证图片大小、格式等。你可以通过AJAX提交文件信息到服务器,然后返回验证结果。如果验证通过,服务器可以返回一个预览图片的临时...
为了提供良好的用户体验和系统安全性,开发者需要在用户上传图片前进行格式验证,确保图片符合规定的格式,并提供预览功能,让用户在提交前能查看上传效果。本文将详细讲解如何使用JavaScript(JS)在客户端实现这一...
1. **Image-verify.css**:这是插件的样式文件,定义了验证图片的外观和布局,包括图片大小、边框、提示文字等样式。 2. **index.html**:这是示例页面,展示了如何在HTML中嵌入和使用验证插件。它可能包含一个包含...
在实际项目中,你可能需要考虑更多的细节,例如错误处理、多图上传的管理、图片大小限制等。在WebApplication1这个项目中,你可能已经看到了类似这样的实现。通过不断优化和改进,可以构建出更完善的图片上传和预览...
js控制图片大小,并验证图片类型,兼容各浏览器,测试可用
此外,为了提高用户体验,还可以添加一些额外的功能,比如限制可接受的文件类型(如只允许上传jpg、png等图像文件)、验证图片大小(防止过大文件导致上传缓慢)以及提供取消选择和重新选择图片的选项。还可以考虑...
在进行图片上传功能时,确保图片大小的验证是非常重要的安全措施。这有助于防止用户上传过大的文件,从而避免服务器资源的过度消耗,提高网站性能,以及优化用户体验。本文主要讨论了两种图片大小验证方法:后台处理...
后缀名验证是最基础的一种验证方式,它主要检查上传文件的扩展名是否符合预期的图片格式(如.jpg、.png、.gif等)。这种方法简单易行,但安全性较低,因为文件名可以被篡改。以下是一个简单的示例: ```php $...