input file 添加图片预览 绑定onchange执行函数 重复添加不执行onchange函数

问题描述：

input file上传图片 绑定了onchange执行函数，是在选择的图片发生变化时才会触发onchange的函数。当我们添加图片并预览时，遇到添加同一张图片或者，添加后删除再添加同一张图片时，不会触发onchange事件。

解决方法：

1.在执行的onchange里的函数最后重新生成一段input file html代码替换掉原来的input file

　　$(‘#cFile‘).replaceWith(‘<input type="file" id="cFile" accept="image/*"  multiple  onchange="javascript:setImagePreview1();" style="filter:alpha(opacity=0);　　　　opacity:0;width:30px;height:30px;position: absolute;left: 0px; overflow: hidden;"/> ‘)

2.写个函数绑定input file 的click事件

时间： 2024-08-09 06:33:20

input file 添加图片预览 绑定onchange执行函数 重复添加不执行onchange函数的相关文章

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性 获得文件属性的js代码如下: <script type

file 图片预览

在上传图片前预览图片的功能,可提高你网站的用户体验,让用户清楚所要上传的图片是不是选对了.本代码无JS插件,纯JavaScript结合HTML来实现,是一个很不错的例子,比较完整: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

常用js,解决 textarea换行，图片预览，等待加载

/** 解决在textarea中输入的数据存入数据库后读到页面没有换行效果* textarea_info是显示在页面内容区域的class* 使用方法:直接在相应的区域加上class="textarea_info"* 在js中调用textarea_br()即可* */    function textarea_br(){        var element = $(".textarea_info");        element.each(function(){ 

文件上传之图片预览

一.业界现状分析 有时候我们需要在上传图片之前为用户提供图片预览的功能,HTML5规范出来之前,由于缺少原生的File API支持,我们需要借助Flash或者浏览器插件来满足这种需求.有了HTML5,我们可使用URL或者FileReader对象实现预览功能. 二.应用场景 图片分享类的应用,如Flickr,Facebook.相册应用,如:QQ相册. 虽然139邮箱没有合适的应用场景,但是可将技术预研的成果作为技术储备,好东西总有用得着的时候. 三.编码实现 方式一:window.URL (1).

dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarDiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(fac);upload.setHeaderEncoding("utf-8"); Html代

前端图片预览

网站后台页面有一个功能,管理员上传图片的时候实现预览,这个功能想到两种实现方法: 1.每次添加图片服务端处理图片,ajax传回缩略图,在页面展示. 2.前端实现预览,只有当提交表单的时候才跟服务器交互. 前端预览的好处显而易见,减少跟服务器的请求次数.百度了下,前端完全能实现这个功能,这个功能也就转化成了前端读取本机文件.考虑到网站是给内部人员用的,不用考虑浏览器兼容的问题,实现起来就简单多了. 没什么好说的,上传图片用这个标签<input type="file">,这个标

图片预览

下方点击小图标,上方显示大图标. 布局文件如下 <body> <h1>图片预览</h1> <p> <img id="largeImg" src="images/img1-lg.jpg" alt="Large Image" /> </p> <p class="thumbs"> <!-- 点击小图片 看到大图片 只是超连接的话 会新打开页面,

纯前端的图片预览

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John 一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前