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下使用

使用效果如下:

         


适用于各浏览器支持图片预览,无刷新异步批量上传js插件(2)

之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是用了些业余时间将它再次优化 以前在上传的时候虽然可以多文件上传,但其实是将所有文件都放到一个form里面同时提交的,这样就造成一个问...
  • sq111433
  • sq111433
  • 2013年11月21日 23:12
  • 68678

uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传预览功能。自带
  • liu__hua
  • liu__hua
  • 2014年08月19日 14:19
  • 28714

图片上传预览插件

  • 2017年07月28日 22:45
  • 3KB
  • 下载

图片上传本地预览插件

图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看 请下载完整的js和css样式,以及Demo 文件上传 ...
  • u013008179
  • u013008179
  • 2016年08月22日 17:28
  • 555

前端js实现图片上传预览

前端实现图片上传预览,实现的原理是使用input标签,type=file,实现图片的上传,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片,而inpu...
  • Miss_Liang
  • Miss_Liang
  • 2017年06月05日 13:55
  • 2990

jquery图片上传预览插件

  • 2014年12月09日 18:26
  • 4KB
  • 下载

实用插件(四)图片上传前预览插件

注:该插件app项目,pc项目都可使用1、由于插件为轻量级,直接附上源码和demo jQuery图片上传前预览 ...
  • qq_39198420
  • qq_39198420
  • 2017年08月04日 15:09
  • 177

js图片上传预览

  • 2014年11月03日 12:58
  • 4KB
  • 下载

uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传预览功能。自带
  • liu__hua
  • liu__hua
  • 2014年08月19日 14:19
  • 28714

适用于各浏览器支持图片预览,无刷新异步批量上传js插件(2)

之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是用了些业余时间将它再次优化 以前在上传的时候虽然可以多文件上传,但其实是将所有文件都放到一个form里面同时提交的,这样就造成一个问...
  • sq111433
  • sq111433
  • 2013年11月21日 23:12
  • 68678
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js控制图片上传预览,使用三方插件+名称显示和控件非display:none隐藏
举报原因:
原因补充:

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