文档章节

上传图片直接预览

开源中国小卖部部长
 开源中国小卖部部长
发布于 2016/11/29 17:41
字数 87
阅读 12
收藏 0

html代码

<div id="rrr"></div>
<input type="file" id="hiddenfile" name="image" onchange="getimgload()"/>

js代码

function getimgload(){
    var file=document.getElementById("hiddenfile").files[0];
    var reader=new FileReader();
    reader.onload = function ( event ) {
      var htmlStr = null;
      var src = null;
      if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片!");
        return false;
      }
        src = event.target.result;
        htmlStr = "<img style='width:50px;height:50px' src='"+src+"'>";
      $("#rrr").html("");
      $("#rrr").append(htmlStr);
    };
    reader.readAsDataURL(file);
  }

复制直接使用

© 著作权归作者所有

共有 人打赏支持
开源中国小卖部部长
粉丝 1
博文 27
码字总数 9958
作品 0
无锡
程序员
私信 提问
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0
OSS 服务端签名后JS直传图片,怎么获取图片预览地址

直接操作阿里云OSS一直是先上传到自己服务器然后再上传OSS这样可以马上生成带签名的预览地址;现在使用服务端签名JS前台直接上传,在有的页面上需要显示出预览图片,在文档上没有提及的地方,...

阿斯兰
08/22
602
0
WebUploader的缩略图如何在后台保存以及下次打开页面时如何展示的问题

大家好,我的使用场景如下:(我觉得比较通用) 用户在需要专家帮忙的时候需要填写文字信息以及上传图片 可上传多图,每选择一个图片无需点击“上传”按钮而自动上传 上传成功后,出现缩略图...

错觉
2015/12/09
9.2K
6
前端图片预览,上传前预览【兼容IE7、8、9、10、11,Firefox,Chrome】

在现在的Web开发中不可避免的会做一个图片预览的功能,比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图...

IT智云编程
11/05
0
0
KodExplorer 4.22 发布,拖拽增强,安全性优化

KodExplorer 4.22 发布了。KodExplorer可 道云,原名芒果云,是基于 Web 技术的私有云和在线文件管理系统,它提供了类windows经典用户界面,一整套在线文件管理、文件预览、编辑、上传下载、...

雾渺
2017/10/02
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部