页面中有默认的图片,触发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实现图片更换(暂未上传)的更多相关文章

  1. #添加图片,最多只能上传9张.md

    #添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...

  2. 使用Git进行本地提交后,未上传提交,却不小心删除了本地提交或提交所在分支,怎么办?????

    使用Git进行本地提交后,未上传提交,却不小心删除了本地提交或提交所在分支,怎么办????? 不要紧!!!! 可以使用git reflog命令来帮助恢复删除的本地提交! 运行以下命令你就知道怎么用了! ...

  3. 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  4. 适应各浏览器图片裁剪无刷新上传jQuery插件(转)

    看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...

  5. puzz: 图片和表单上传的不一致问题

    1.    方向1 用户提交表单, 图片和表单同步上传.(由同一服务器处理, 服务器压力大. 没有分离) 2.    方向2 图片和表单分开上传. 如图片访问ftp,表单提交后台(图片和后台分离) 2 ...

  6. 【Android实战】----基于Retrofit实现多图片/文件、图文上传

    本文代码详见:https://github.com/honghailiang/RetrofitUpLoadImage 一.再次膜拜下Retrofit Retrofit不管从性能还是使用方便性上都非常屌 ...

  7. 使用html5 FileReader获取图片,并异步上传到server(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...

  8. Android实战简易教程-第二十八枪(基于Bmob实现头像图片设置和网络上传功能!)

    上一篇我们介绍了怎样由uri转换成String ,本文就用到了上篇文章的方法.以下我们介绍一下怎样设置头像后将头像图片上传到云端的方法,本文基于Bmob提供的服务. 看一下代码:(布局文件和前两篇文章 ...

  9. mui调用本地相册调用相机上传照片

    调用mui的常用库和jquery html部分: <header class="mui-bar mui-bar-nav"> <a class="mui- ...

随机推荐

  1. 用nexus搭建自己的maven私有仓库

    用nexus搭建自己的maven私有仓库  刚安装nexus时,nexus启动失败,启动不到1分钟,自动停止.后来查找到了原因: Java 6 Support EOLOracle's support ...

  2. Ubuntu 16.04 LTS 一键安装VNC

    Ubuntu 16.04 LTS 安装VNC,在百度和谷歌找了很多教程,不是太老,就是说的驴唇不对马嘴,所以忍不住写一些以正视听. Ubuntu 16.04 LTS是最近出的LTS版本系统,估计未来也 ...

  3. web.xml中:<context-param>与<init-param>的区别与作用及获取方法

    <context-param>的作用: web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件w ...

  4. JAVA企业级开发-JavaScript(02)

    一.JavaScript介绍 Javascript语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码. 特点: 交互性(它可以做的就是信息的动态交互 ...

  5. C++ BYTE、WORD与DWORD类型

    在VS中,BYTE与WORD,DWORD本质上都是一种无符号整型,它们在WINDEF.H中被定义,定义如下: typedef unsigned char       BYTE;typedef unsi ...

  6. linux命令之grep,find

    grep命令 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索 ...

  7. [UE4]Component相关常用API

    http://www.dawnarc.com/2017/02/ue4component%E7%9B%B8%E5%85%B3%E5%B8%B8%E7%94%A8api/ Actor.h //获取第一个与 ...

  8. codeforces494C Helping People【treedp+概率dp】

    区间不交叉,可以看出区间构成了树形结构,建出树之后,设f[u][i]为u这个区间最大值最多加i的概率,转移是\( f[u][i]=p[u]*\prod f[v][mxu-mxv-1]+(1-p[u]) ...

  9. js原型和构造函数

    前言 从应用层面深入理解原型模式和js中的构造函数. 构造函数(constructor) js中的任何对象都有自己的构造函数.js中使用字面量声明的普通对象({})或数组([])等子对象本质上都是使用 ...

  10. SublimeText3 snippet 编写总结

    SublimeText3 snippet 编写总结 SublimeText的snippet定义功能也十分强大, 类似VAssist. 在菜单tool->New Snippet中定义.  打开后显 ...