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

最新推荐文章于 2020-01-14 21:16:26 发布

luyangyy

最新推荐文章于 2020-01-14 21:16:26 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/luyangyy/article/details/50770607

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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' });" οnmοuseοut="$('#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下使用

使用效果如下：