码迷,mamicode.com
首页 > Web开发 > 详细

上传图片时预览

时间:2017-11-12 23:03:47      阅读:350      评论:0      收藏:0      [点我收藏+]

标签:图片   line   span   width   accept   nbsp   class   lin   get   

简述

    本文的使用场景主要是用户修改头像,选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。


1.首先,页面上有一个input[type=‘file‘]标签

<input id="head" name="headPortrait" class="btn btn-xm btn-outline btn-primary" style="margin: 0 auto" type="file" value="选择图片" accept="image/png,image/jpeg">

  accept可以在前台限制用户可以上传什么类型的文件。

2.在标签下面添加一个div,用来显示用户选择的图片

<div id="headImg" style="margin-top: 10px;"></div>

3.给input绑定change事件,获取并加载图片

 1 $("#head").change(function () {
 2     var eImg = $("<img width=‘120px‘ name=‘pic‘ />");
 3     eImg.attr(‘src‘, getObjectURL(this.files[0]));
 4     $("#headImg").html(eImg); 6 })
 7 
 8 //获取URL
 9 function getObjectURL(file) {
10     var url = null;
11     if (window.createObjectURL != undefined) { // basic
12         url = window.createObjectURL(file);
13     } else if (window.URL != undefined) { // mozilla(firefox)
14         url = window.URL.createObjectURL(file);
15     } else if (window.webkitURL != undefined) { // webkit or chrome
16         url = window.webkitURL.createObjectURL(file);
17     }
18     return url;
19 }

 

 完事

 

上传图片时预览

标签:图片   line   span   width   accept   nbsp   class   lin   get   

原文地址:http://www.cnblogs.com/gaofei-1/p/7823157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!