上传图片显示缩略图

<script>
function veriFormat(val){
var strMrt = val.val().split(".")[val.val().split(".").length - 1];
if(strMrt){
ext = strMrt.toUpperCase();
if(ext!="BMP"&&ext!="PNG"&&ext!="GIF"&&ext!="JPG"&&ext!="JPEG"){
alert("图片限于bmp,png,gif,jpeg,jpg格式");
/*val.nextAll(‘.tumb_area‘).slideUp(100);*/
val.val("");
return false;
}else{
return true;
}
}else{
return true;
}
}

$(‘body‘).on(‘change‘,‘.input_file‘,function(e){
var file = e.target.files[0];
var reader = new FileReader();
var t=$(this);
if(veriFormat(t)){
/*t.nextAll(‘.tumb_area‘).slideUp(100);*/
reader.onload = function(e){
//displayImage($(‘bd‘),e.target.result);
//alert(‘load‘);
t.nextAll(‘.tumb_area‘).children(‘img‘).attr(‘src‘,e.target.result);
t.nextAll(‘.tumb_area‘).slideDown(100);
}
reader.readAsDataURL(file);
t.blur();
}
});
</script>

时间: 2024-10-14 04:51:32

上传图片显示缩略图的相关文章

Js实现input上传图片并显示缩略图

用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果: FileReader 的 readAsDataURL() 先创建一个img标签,再用 fileReader 把input文件的赋值到img的src即可 具体代码如下: function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; v

MVC图片上传并显示缩略图

前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了,不过图片上传当然只能是图片格式的文件,因此在之前那篇博客中 通过控制格式的上传便能防止恶意上传,这个是文件上传的教程链接:http://www.cnblogs.com/xmfdsh/p/3988868.html 对于数据库的设计的话就随便点: 于是用EF便自动生成了类如下: public part

上传图片显示本地链接——FileReader

参考网站 FileReader - Web API 接口 | MDN DEMO 简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasEl

融云发送不显示缩略图解决方法

部分安卓手机在使用融云打包正式版后,发送图片不显示缩略图,解决方法如下: 1. 发送本地图片,rong.sendImageMessage的prepare,此时使用本地默认图片2. 发送中,显示图片发送百分比,利用监听3. 发送成功后,rong.getHistoryMessages 获取历史记录,参数:oldestMessageId : -1,count : 14. 根据返回值替换之前的默认图片src /** * 发送图片消息 * 周枫 * 2015.08.11 * @param {Object}

上传图片生成缩略图

上传图片生成缩略图,原图和缩略图地址一样的时候缩略图会把原图覆盖掉 /// <summary> /// 生成缩略图 /// </summary> /// <param name="originalImagePath">源图路径(物理路径)</param> /// <param name="thumbnailPath">缩略图路径(物理路径)</param> /// <param name=

使用 Sixel 图形格式在终端中显示缩略图

不久前,我们讨论了 Fim,这是一个轻量级的命令行图像查看器应用程序,用于从命令行显示各种类型的图像,如 bmp.gif.jpeg 和 png 等.今天,我偶然发现了一个名为 lsix的类似工具.它类似于类 Unix 系统中的 ls命令,但仅适用于图像.lsix 是一个简单的命令行实用程序,旨在使用 Sixel 图形格式在终端中显示缩略图.对于那些想知道的人来说,Sixel 是六像素six pixels的缩写,是一种位图图形格式.它使用 ImageMagick,因此几乎所有 imagemagic

文件和打印的技巧-上传图片以后显示缩略图

———————————————————————— <body style="text-align:center">        <div id="demo"></div>        <form action="./upload.html" target="tgt_frame" method="post"             enctype="mu

jquery html5 file 上传图片显示图片

最近做了一个小例子,在上传用户图像时,如何在上传图片时显示图片.在网上找了很多资料也未能如愿,如是,就用jquery ,html5,实现了,由于开发是在linux 所以未能在ie下测试,在forefox,chrom下是可以的. 一.html下的代码是: <div class=' input_box' > <span class='spac' >头</span>相:<input class="input_style" id="'head

dedecms有缩略图则显示缩略图,没有则显示随机缩略图

随着html5以及扁平化等新的设计概念的深入人心,缩略图功能则成了一般网页模版制作不可或缺的一个功能,dedecms默认的的缩略图调用标签[field:imglink/] 或者 [field:litpic/],在文章有缩略图的时候会调用缩略图,没有的时候就调用默认图片defaultpic.gif,但是会有各种意外的情况导致文章内没有配图,只是显示默认的图片的话,页面美观上就得不到保证,前面还有人分享过一篇通过js来实现随机缩略图的,具体使用起来的话,还是觉得有些鸡肋,今天的话给大家分享一个新的解