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部分改写为Js,可以把jquery都省略掉,缺点是当数据非常多时,未上传的图片,也会存储到服务器。服务器空间大,可以忽略此不足。...

jquery.fileupload.js插件使用初探--单图片上传预览

一、官方插件下载地址:http://plugins.jquery.com/blueimp-file-upload/         下载下来后会发现里面包含了一堆文件,首先需要弄清楚的是最核心的部分是...
  • smm188
  • smm188
  • 2016年02月26日 14:21
  • 629

ThinkPHP的使用(六)图片上传及预览插件

将图片预览插件uploadPreview.js下载好放入Common->Js中 模板中导入js文件,及主要代码 ...

图片上传本地预览插件

  • 2016年12月22日 14:03
  • 4KB
  • 下载

jquery图片上传预览插件

  • 2013年07月12日 16:28
  • 4KB
  • 下载

jquery.uploadify插件实现图片上传和预览效果

1、js代码: $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : 'im...
  • hongyu6
  • hongyu6
  • 2012年10月16日 22:37
  • 4241

多图片上传预览插件

  • 2017年05月21日 21:25
  • 101KB
  • 下载

图片上传预览插件

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

图片上传本地预览插件

图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看 请下载完整的js和css样式,以及Demo 文件上传 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js控制图片上传预览,使用三方插件+名称显示和控件非display:none隐藏
举报原因:
原因补充:

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