在做上传图片预览时,利用input onchange事件触发函数,但是type=file时,一定记得新建要清空原来的图片,因为原来的图片还存在在input里面,再选重复的图片没有change,故不会触发相应的函数,造成没有反应的现象

具体的清空input file的方法:

<input type="file" accept="image/jpeg,image/png,image/gif" name="img" id="img" multiple value="Insert Image" onchange="javascript:setImagePreview();" style="position:absolute;clip:rect(0 0 0 0);">

// 清空input file文件jq
var file = $('#img')[0];
if(file.outerHTML){
file.outerHTML = file.outerHTML;
}else{
file.value = '';
}
// 清空input file文件原生js
var file = document.getElementById("img");
// for IE, Opera, Safari, Chrome
if (file.outerHTML) {
file.outerHTML = file.outerHTML;
} else { // FF(包括3.5)
file.value = "";
}

  

js 清空html input file的值的更多相关文章

  1. js清空input file的值

    原文:js清空input file的值 在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img ...

  2. Jquery 清空input file的值

    var file = $(obj).parent().find(".fileData");                $(file).val('');

  3. Js/Jquery获取input file的文件名

    html代码:     <input type="file" name="file" id="file" class="in ...

  4. js 获取、清空 input type="file"的值 .(转)

    上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...

  5. 如何解决input file 选取相同文件后,change事件不起作用解决方法

    两种方法 1.在你的input所属的form表单reset()就可以了! $("#avatorForm")[0].reset(); 2.设置你的input file value值为 ...

  6. js 清空 input[type=file]的值

    js 不能操作 input[type=file]但你可以将这个 input 的 dom 元素删除掉,再新增一个,或者替换掉 $("#UploadFile").replaceWith ...

  7. JS 更改表单的提交时间和Input file的样式

    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...

  8. js下读取input中的value值

    很多人(包括我),总想像以前操作js一样,读取到input中的值:document.getElementById('').value; 结果事实证明这样读到得是null. eval(document. ...

  9. Js/如何修改easyui修饰的input的val值

    1.关于js对input值的修改介绍:一般js改变input的val值,我一直使用的方法是: $('#id').val('test');这样的方式来进行修改.但是我使 用了class="ea ...

随机推荐

  1. jquery实现同时展示多个tab标签+左右箭头实现来回滚动(美化版增加删除按钮)

    闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...

  2. CF 634A Island Puzzle

    A. Island Puzzle time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  3. 案例源码解读及思路:RabbitMQ在springboot中的配置

    程序员的高级之处不是什么都会,而是对自己不会的进行抽象,然后完成自己的工作.比如对于RabbitMQ,按照字面理解,就将其看成Message Queue,也就是用来容纳对象的集合.很多功能都拆分给一个 ...

  4. js 判断当前操作系统是ios还是android还是电脑端

    js判断客户端是否是IOS或者是Android //如果返回true 则说明是Android function is_weixin() { var ua = window.navigator.user ...

  5. vue里的v-show和v-if

    v-show:false            对应的是display:none:不移除dom元素.对网页渲染性能更好,适应于频繁的操作该dom的显示隐藏. v-if:  false       对应 ...

  6. 深入解析HashMap、HashTable

    集合类之番外篇:深入解析HashMap.HashTable Java集合类是个非常重要的知识点,HashMap.HashTable.ConcurrentHashMap等算是集合类中的重点,可谓“重中之 ...

  7. python全栈开发 * 33 知识点汇总 * 180718

    33 udp协议编码 显示客户端名字,输出带颜色的内容 udp协议的时间同步机制 #一.udp 协议编码 一个服务器,多个客户端#服务器:# import socket# sk=socket.sock ...

  8. 9 个用于移动APP开发的顶级 JavaScript 框架【申明:来源于网络】

    9 个用于移动APP开发的顶级 JavaScript 框架[申明:来源于网络] 地址:http://www.codeceo.com/article/9-app-javascript-framework ...

  9. JVM—内存溢出、OutOfMemoryError、StackOverflowError

    学习jvm时看到几篇非常好的系列文章,转载了: <深入理解Java虚拟机>学习小记一之自动内存管理机制(一) http://my.oschina.net/linuxfelix/blog/1 ...

  10. Python 学习笔记1 安装和IDE

    前面的话 现在随着互联网的快速发展,对测试人员的代码要求也越来越高.有种逐步往全栈开发人员发展的趋势. 越来越多的手工测试被自动化取代. 对于测试人员,学习一门开发语言迫在眉睫. C#, JAVA, ...