mui实现图片更换(暂未上传)
页面中有默认的图片,触发type为file的input时,更换图片,这个是mui移动端的项目,算了,不多说,开码
首先,先在html页面中设置样式,样式我就不给了,贴个布局
<div class="re_page_title re_linecolor_3 bule">模块5</div>
<li class="mobile_list aa">
<dd>URL:</dd>
<dd><input type="text" placeholder="请输入添加的网址" id="urlIdUpload" class="urlIdUpload"/></dd>
<dd>描述:</dd>
<dd><input type="text" placeholder="请输入描述" id="detailUpload" class="detailUpload"/></dd>
<dd><span class="defaultIcon">默认图标:</span>
<form id="form1" runat="server" style="width:65%;float:left;">
<button type="button" class="fileUploadBox">更多图标
<input type='file' accept="image/* id="imgInp" class="iconFileUpload"/>
</button>
<div class="iconShow">
<img id="blah" class="blah" src="./resources/images/default.png" alt="默认图片"/>
</div>
</form>
<button type="button" class="mui-btn mui-btn-success resetBtn" id="resetBtn">重置</button>
</dd>
</li>
<li class="mobile_list aa">
<dd>URL:</dd>
<dd><input type="text" placeholder="请输入添加的网址" id="urlIdUpload" class="urlIdUpload"/></dd>
<dd>描述:</dd>
<dd><input type="text" placeholder="请输入描述" id="detailUpload" class="detailUpload"/></dd>
<dd><span class="defaultIcon">默认图标:</span>
<form id="form1" runat="server" style="width:65%;float:left;">
<button type="button" class="fileUploadBox">更多图标
<input type='file' accept="image/* id="imgInp" class="iconFileUpload"/>
</button>
<div class="iconShow">
<img id="blah" class="blah" src="./resources/images/default.png" alt="默认图片"/>
</div>
</form>
<button type="button" class="mui-btn mui-btn-success resetBtn" id="resetBtn">重置</button>
</dd>
</li>
单个更换图片:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(".iconFileUpload").change(function(){ //调用
readURL(this); });
多个图片循环遍历更换:
var fileNum = $('.iconFileUpload'); //获取上传图片按钮
mui.each($('.iconFileUpload'),function(index,item){ //遍历
var newItem = item; //item是获取的input元素,index是下标
$('.iconFileUpload').change(function(){ //当上传触发,改变的时候
var el = newItem; //将元素赋值给el
var imgNum = $(this).parent().siblings('.iconShow').children('img'); //获取到当前上传input之后需要显示图片的img框架
if (el.files && el.files[0]) { //获取到这个文件或图片的信息或对象
var reader = new FileReader(); //新建一个文件对象
reader.onload = function (e) {
$.each(imgNum,function(){ //循环遍历多个图片框架
$(this).attr('src', e.target.result); //给当前的图片更换地址
});
};
reader.readAsDataURL(el.files[0]);
}
});
});
最终我的结果:
亲测有效,可以利用单个的先尝试,若是多个的需要遍历的可用下面的,但代码根据布局的变化会变化,不确定都有效,单个的有效,可自己再次修改即可。
这个暂时没有用到‘相机’。‘从相册中选取’等等的js代码,但是这个在手机上也是可以直接用的,file的input在手机上可识别。
看了网上好多的方法,最终暂时用了这个,等过几天和后台接洽的时候再看看有没有毛病!
实践才能真知!!!
mui实现图片更换(暂未上传)的更多相关文章
- #添加图片,最多只能上传9张.md
#添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...
- 使用Git进行本地提交后,未上传提交,却不小心删除了本地提交或提交所在分支,怎么办?????
使用Git进行本地提交后,未上传提交,却不小心删除了本地提交或提交所在分支,怎么办????? 不要紧!!!! 可以使用git reflog命令来帮助恢复删除的本地提交! 运行以下命令你就知道怎么用了! ...
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- 适应各浏览器图片裁剪无刷新上传jQuery插件(转)
看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...
- puzz: 图片和表单上传的不一致问题
1. 方向1 用户提交表单, 图片和表单同步上传.(由同一服务器处理, 服务器压力大. 没有分离) 2. 方向2 图片和表单分开上传. 如图片访问ftp,表单提交后台(图片和后台分离) 2 ...
- 【Android实战】----基于Retrofit实现多图片/文件、图文上传
本文代码详见:https://github.com/honghailiang/RetrofitUpLoadImage 一.再次膜拜下Retrofit Retrofit不管从性能还是使用方便性上都非常屌 ...
- 使用html5 FileReader获取图片,并异步上传到server(不使用iframe)
使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...
- Android实战简易教程-第二十八枪(基于Bmob实现头像图片设置和网络上传功能!)
上一篇我们介绍了怎样由uri转换成String ,本文就用到了上篇文章的方法.以下我们介绍一下怎样设置头像后将头像图片上传到云端的方法,本文基于Bmob提供的服务. 看一下代码:(布局文件和前两篇文章 ...
- mui调用本地相册调用相机上传照片
调用mui的常用库和jquery html部分: <header class="mui-bar mui-bar-nav"> <a class="mui- ...
随机推荐
- 用nexus搭建自己的maven私有仓库
用nexus搭建自己的maven私有仓库 刚安装nexus时,nexus启动失败,启动不到1分钟,自动停止.后来查找到了原因: Java 6 Support EOLOracle's support ...
- Ubuntu 16.04 LTS 一键安装VNC
Ubuntu 16.04 LTS 安装VNC,在百度和谷歌找了很多教程,不是太老,就是说的驴唇不对马嘴,所以忍不住写一些以正视听. Ubuntu 16.04 LTS是最近出的LTS版本系统,估计未来也 ...
- web.xml中:<context-param>与<init-param>的区别与作用及获取方法
<context-param>的作用: web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件w ...
- JAVA企业级开发-JavaScript(02)
一.JavaScript介绍 Javascript语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码. 特点: 交互性(它可以做的就是信息的动态交互 ...
- C++ BYTE、WORD与DWORD类型
在VS中,BYTE与WORD,DWORD本质上都是一种无符号整型,它们在WINDEF.H中被定义,定义如下: typedef unsigned char BYTE;typedef unsi ...
- linux命令之grep,find
grep命令 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索 ...
- [UE4]Component相关常用API
http://www.dawnarc.com/2017/02/ue4component%E7%9B%B8%E5%85%B3%E5%B8%B8%E7%94%A8api/ Actor.h //获取第一个与 ...
- codeforces494C Helping People【treedp+概率dp】
区间不交叉,可以看出区间构成了树形结构,建出树之后,设f[u][i]为u这个区间最大值最多加i的概率,转移是\( f[u][i]=p[u]*\prod f[v][mxu-mxv-1]+(1-p[u]) ...
- js原型和构造函数
前言 从应用层面深入理解原型模式和js中的构造函数. 构造函数(constructor) js中的任何对象都有自己的构造函数.js中使用字面量声明的普通对象({})或数组([])等子对象本质上都是使用 ...
- SublimeText3 snippet 编写总结
SublimeText3 snippet 编写总结 SublimeText的snippet定义功能也十分强大, 类似VAssist. 在菜单tool->New Snippet中定义. 打开后显 ...