js控制图片上传预览,使用三方插件+名称显示和控件非display:none隐藏

原创 2016年03月01日 10:31:33

第一次写blog,只是为了自己做记录,方便下次寻找方便,如有不足处见谅。

js三方引用,v1.4,附件下载http://jquery.decadework.com

    <script src="js/uploadPreview.js"></script>


html部分

      <div id="imgdiv1" style="margin-left: 180px;margin-top: 1px;float: left;">
                        <img id="imgShow1" width="120" height="120" class="fileInput left" onclick ="$('input[name=upfile1]').click();"onmousemove ="new uploadPreview({ UpBtn: 'upfile1', DivShow: 'imgdiv1', ImgShow: 'imgShow1' });" onmouseout="$('#upfileResult1').html(($('#upfile1').val()!=''&&$('#upfile1').val().indexOf('\\')>0)?$('#upfile1').val().substring($('#upfile1').val().lastIndexOf('\\')+1,$('#upfile1').val().length):'');" />
                        <p><input type="file" id="upfile1" name="upfile1"  style="position: absolute;top: -100px;" /></p>
                        <p>  <span id="upfileResult1"></span>   
                   </div>

css(并不是必要,只是记录下):

.Upload_Avatar {
background: #eeeeee;
height: 150px;
margin-left: 284px;
margin-top: -60px;
width: 150px;
}
.fileInput {
background:url(images/up-avo.gif) no-repeat;
height: 150px;
margin: 5px auto;
overflow: hidden;
position: relative;
width: 150px;
}
.field input {
border: 1px solid #d0cfcf;
height: 25px;
line-height: 35px;
padding: 5px 10px;
width: 250px;
}
.upfile {
position: absolute;
top: -100px;
}


注:不可display:none隐藏file控件,会影响ie下使用

使用效果如下:

         


jquery上传图片本地预览插件V1.2

v1.2  1.修复jquery版本高于1.9,插件报错BUG.  2.提供未压缩代码. 插件支持IE全系列  谷歌 火狐 等浏览器 注意:不支持safari 插件使用说明: 1.必...
  • chaishen10000
  • chaishen10000
  • 2016-05-31 19:56:09
  • 1514

快速实现:删除和预览当前选择需要上传的图片

有时候我们在做文件上次时有这么一个需求: 可以预览以及删除当前选中的图片...
  • q649381130
  • q649381130
  • 2017-05-25 15:49:04
  • 3636

原生js、jquery实现多张图片上传、预览、删除

1、Duang!Duang!Duang!上图、看最终效果(注:鼠标以上图片显示“删除”按钮) 2、贴上我的css代码,方便小伙伴们看到效果!  .img-cont{         width:1...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016-11-17 11:54:09
  • 14586

javaweb图片上传 tomcat重新部署 图片消失

图片上传tomcat重新部署图片消失原因分析以及解决办法
  • helloworld1993
  • helloworld1993
  • 2015-08-14 14:55:19
  • 9336

微擎移动端图片上传

微擎移动端图片上传和兼容问题:                      引入lrz.min.js,用于压缩图片有时候会遇到各类手机不兼容的问题时需引入2.chunk.js。lrz.min.js...
  • qq_39821282
  • qq_39821282
  • 2017-09-10 20:40:59
  • 176

利用表格的属性style=""display: none""来显示或隐藏表格

要调用的JS函数,可以用于各种属性function showadv(ino){var adv=eval("adv"+ino);//多个表格时分开var loadImg=eval("img"+ino);...
  • lg_lin
  • lg_lin
  • 2006-05-25 13:52:00
  • 5148

javascript中的显示和隐藏(display属性)

display             function hidetext()           {           var mychar = document.getElement...
  • wuxiaobingandbob
  • wuxiaobingandbob
  • 2016-05-12 08:51:57
  • 7337

如何用js和css美化input file 按钮,并且显示上传的文件名

一开始查的时候,教程里都是用
  • u010345711
  • u010345711
  • 2014-09-13 21:38:48
  • 1981

java web文件上传-无框架

一、不借助任何的外部工具上传文件(全是数据流,处理太麻烦) 1、创建一个web工程,写一个jsp页面,页面中包含如下代码 /upload" method="post" enctype="multi...
  • u012454773
  • u012454773
  • 2015-06-30 22:37:07
  • 885

js控制元素隐藏显示,显示时不用display=block

用支付宝amui时遇到一个郁闷的问题,把div设置成display:block,显示就乱了,不知道amui怎么写的css,反正这个block是不能用了,原来想通过添加移除元素的方式实现,想想有点麻烦,...
  • liuguxing
  • liuguxing
  • 2015-11-24 18:35:49
  • 4043
收藏助手
不良信息举报
您举报文章:js控制图片上传预览,使用三方插件+名称显示和控件非display:none隐藏
举报原因:
原因补充:

(最多只允许输入30个字)