js实现上传图片回显功能
用到h5技术
<img id="headimg" src="<%=path%>/resources/images/icon4.png" style="cursor:pointer;" height="90px;" width="95%;">
<input id="headurladd" type="file" name="headUrl1" onchange="readFile(this)" style="display: none;" />
<input type="hidden" name="headUrl" id="logo" value="" />
js如下:
$("#headimg").click(function(){
addhead('headurladd');
});
function addhead(obj){
$("#"+obj).click();
}
function readFile(obj){
var file = obj.files[0];
//判断类型是不是图片
/* if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
} */
var reader = new FileReader();
reader.readAsDataURL(file);
//情况一:对读取到的图片编码
reader.onload = function(e){
var imgBase64Data =encodeURIComponent(e.target.result);
$("#headimg")[0].src=this.result;
var res = (this.result);
var pos = imgBase64Data.indexOf("4")+4;
imgBase64Data = imgBase64Data.substring(pos);
$('#logo').val(imgBase64Data);
}
//情况二:对读取的图片没编码
reader.onload = function(e){
var imgBase64Data = e.target.result;
$("#headimg")[0].src=this.result;
var res = (this.result);
var pos = imgBase64Data.indexOf("4")+2;
imgBase64Data = imgBase64Data.substring(pos);
$('#logo').val(imgBase64Data);
}
}
js实现上传图片回显功能的更多相关文章
- springmvc+ztree v3实现类似表单回显功能
在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...
- JS实现单选按钮回显时页面效果出现,但选中单选框的值为空
最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取 ...
- WebUploader 上传图片回显
/* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) { $.fn.extend({ uploadImg: func ...
- 5.4.1 termios结构,关闭回显功能,一键入字符fgetc立刻返回,不用按下回车键
Linux提供了一组编程接口,用来控制终端驱动程序的行为.这样我们可以更精细的来控制终端. 例如: 回显:允许控制字符的回显,例如读取密码时. 使用termios结构的密码程序 #include &l ...
- activiti官网实例项目activiti-explorer之扩展多选框回显功能
相关参考链接:https://blog.csdn.net/murongxuesheng/article/details/76147380 回显:确认选中属性ng-model,循环属性ng-repeat ...
- HTML、jsp页面中radio,checkbox,select数据回显功能,默认被选中问题
最近常常遇到各种复选框.单选框.下拉框的默认被选中的问题,开始也是绞尽脑汁的想办法,今天写一篇学习总结的博文来写一下学习总结. 单选框(radio)默认被选中: 一.jstl技术进行回显 <in ...
- Kindeditor上传图片回显不出来
原因之一: 图片成功上传但是回显不出来,这个时候,要检查返回的图片地址是否加了http://这个玩意,不然会将原来的头加上图片返回地址.
- layui 上传图片回显并点击放大实现
1.页面代码布局 <div class="layui-col-xs12 form-group"> <div class="layui-col-xs6&q ...
- js上传图片回显
$("#file01").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log(&qu ...
随机推荐
- java课程之团队开发冲刺1.1
一.今日目标 1.完成课程助手的日期显示以及周数显示功能 2.将功能表改成侧面功能栏 3.将代码重新规范,尽量使得主函数简洁明了
- SecureCRT连接开发板 串口传输、tftp传输
1.串口传输 使用命令:rx r是service, x是X-model模式 ①.rx 文件名 再按Enter键 ②.将需要传到板子上的文件 拖到SecureCRT里面,选择发送X-model选项 注 ...
- 基于Dapper写的一个sqlhelp适用于多版本数据库
ConnectionInit方法用于初始化数据库连接对象, 只需要修改databasetype参数即可进行适用各个版本的数据库, ExecuteNonQuery方法用于执行增.删.改操作,返回受影响的 ...
- [Solution] 885. Spiral Matrix Ⅲ
Difficulty: Medium Problem On a 2 dimensional grid with R rows and C columns, we start at (r0, c0) f ...
- 【spring】使用spring过程中踩到的坑
这里简单记录一下,学习spring的时候碰过的异常: 异常:org.springframework.beans.factory.BeanDefinitionStoreException: Unexpe ...
- 【GitHub】的基本使用
GitHub是一个常用的版本管理工具,之前安装了window版的git但是一直没使用过,今天尝试一下,去百度了一下使用方法: 引用https://www.cnblogs.com/paulwhw/p/9 ...
- listview的gridview视图中,获取列中模板内的button按钮(找控件内的控件)
点击“间隙”,获取“间隙”旁边隐藏的减号按钮(本图片未显示出来) private void TextBlock_MouseDown_2(object sender, MouseButtonEventA ...
- 云计算底层技术-虚拟网络设备(Bridge,VLAN)( 转发)
云计算底层技术-虚拟网络设备(Bridge,VLAN) Posted on September 24, 2017 by opengers in openstack openstack底层技术-各种虚拟 ...
- Purge and Seal Test on 09 GMC Yukon with Autel Maxisys Pro MS908P scanner
Autel Maxisys Pro MS908P diagnostic scanner does a purge and seal test on 2009 GMC Yukon hybrid succ ...
- Mac使用笔记大全
1.mac中,怎么直接在当前文件夹打开终端? 步骤:(1)在键盘-快捷键-服务,勾选“新建位于文件夹位置的终端窗口”.(2)然后在需要打开终端的文件夹上,右键,“新建位于文件夹位置的终端窗口”即可. ...