使用input的file来上传图片 如果是重复选择相同的图片就会失效

解决的办法就是当每次上传完图片后让input的值为空就可以解决了 附上代码 只需在末尾添加这句就行$(this).val("");

// 上传企业环境
$("#upfile-hj").change(function (e) {
var files = this.files;
var length = files.length;
if (length > 6 || length + $('.img-hj').children('div').length > 6) {
alert('最多选择6张图片')
return false
}
for (var i = 0; i < length; i++) {
if (!/image\/\w+/.test(files[i].type)) {
alert("您上传的图片有误 请重新上传");
return false;
}
var fr = new FileReader(),
div = document.createElement("div"),
img = document.createElement("img");
div.className = 'pic';
fr.onload = function (e) {
var html_img = '<div style="display:inline-block;position: relative;"><img class="qyhj" src="' + this.result + '" alt=""><img class="xx" src="../public/images/ic_Close_ .png" alt=""></div>'
$('.img-hj').append(html_img)
if ($('.img-hj').children('div').length == 6) {
$('.file-img .img-hjbtn').hide()
}
}
fr.readAsDataURL(files[i]);//读取文件
}
$(this).val(""); //上传完图片后让input值为空
});

  

input重复上传图片失效的问题的更多相关文章

  1. JQuery input file 上传图片

    表单元素file设置隐藏,通过其他元素打开: .imgfile为input file $(".ul").click(function () {return $(".img ...

  2. input标签上传图片怎么获取src;

    大家都知道input标签可以上传文件 如: <input type="file"/> 就可以上传文件,当然也可以上传图片,上传的图片的src地址如何取到: var re ...

  3. input file 上传图片问题

    html代码如下: <input id="fileup" type="file" accept="image/*" capture=& ...

  4. 改变bootstrap-wysiwyg样式(如hide()show()等),上传图片失效

    最近在试验bootstrap-wysiwyg鱼easyui的整合,两者的兼容性,可以说是基本不兼容... 但是由于需求摆在那里,再大的困难也得克服. 比如像是将bootstrap-wysiwyg放入e ...

  5. html5手机 input file 上传图片 调用API

    <input type="file" accept="video/*;capture=camcorder"> <input type=&quo ...

  6. (转)html中使用表单和input file上传图片

    本文转载自:http://hi.baidu.com/love_1210/item/120e452b42b2a854c38d59eb 客户端代码: <form name="form1&q ...

  7. input file上传图片预览,非插件

    Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...

  8. 微信小程序 input使用letter-spacing失效问题

    根据ui设计稿, 本来思路是一个input搞定,下面的线使用背景图 background:url('/images/line.png')no-repeat bottom center; 然后使用let ...

  9. H5 使用input标签上传图片给后台

    html代码: <div class="hpk-showimg"> <!-- 营业执照 --> <div class="idcardup&q ...

随机推荐

  1. Vue学习笔记(20190722)

  2. ORACLE数据库实现自增的两种方式

    Mysql数据库因为其有自动+1,故一般我们不需要花费太多时间,直接用关键字auto_increment即可,但是Oracle不行,它没有自动增长机制.顾我们需要自己去实现.一般有两种方式,但是这两种 ...

  3. python pip 切换阿里云镜像

    示例: pip install xxx -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com

  4. 【洛谷 P3804】 【模板】后缀自动机

    题目链接 #include <cstdio> #include <cstring> #include <algorithm> using namespace std ...

  5. 阿里企业邮箱smtp设置

    阿里的邮箱没有SMTP授权码信息 SMTP服务器:smtp.mxhichina.com

  6. Python学习日记(二) list操作

    l = ['a','b','c','d',1,2,[3,'e',4]] 1.list.append() 在list的结尾新增一个新的元素,没有返回值,但会修改原列表 l.append(5) print ...

  7. 【转】高性能网络编程3----TCP消息的接收

    这篇文章将试图说明应用程序如何接收网络上发送过来的TCP消息流,由于篇幅所限,暂时忽略ACK报文的回复和接收窗口的滑动. 为了快速掌握本文所要表达的思想,我们可以带着以下问题阅读: 1.应用程序调用r ...

  8. k8s集群之上运行etcd集群

    一.知识点: 1.headless services NOTE:: 我们在k8s上运行etcd集群,集群间通告身份是使用dns,不能使用pod ip,因为如果pod被重构了ip会变,在这种场景中不能直 ...

  9. 华为云PaaS首席科学家:Cloud Native +AI,企业数字化转型的最佳拍档

    近日,在2019华为全球分析师大会期间,华为云PaaS首席科学家熊英博士在+智能,见未来(华为云&大数据)的分论坛上,从云计算行业发展谈起,深入云原生发展趋势,对华为云智能应用平台做了深度解读 ...

  10. IDEA实用教程(六)—— 全局设置的两种方式

    五. 全局设置的两种方式 在启动界面进入全局设置 在编码界面进入全局设置 本项目配置 上面的这种设置仅对本项目生效,不会对其他项目生效.请特别注意!!!