需要解决的问题有:本地图片如何在上传前预览、编辑;
最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect,FileReader对象(chrome和ff获取本地图片数据的接口),IE滤镜效果。
关键词:imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果
一、实现上传前预览
1.1、页面显示
代码1-1显示的是html需要展示的web页面信息
03 |
< img id = "biuuu" src = "#" title = "biuuu" > |
06 |
< div id =”upload_area”> |
07 |
< form name = "form1" action = ' /person?c=changeAtvatar' enctype = 'multipart/form-data' method = 'POST' > |
08 |
< input type = "file" id = "picpath" name = "atvatar_image" > |
09 |
< a href = "javascript:void(0);" class = "button" > 上传照片</ a > |
10 |
< input type = 'text' name = "path" readonly> |
11 |
< div id = “submit_button”> |
12 |
< a href = "javascript:void(0);" class = 'button' >确认</ a > |
代码1-1
为了修改input file的按钮名称,我们添加了一段代码,这个在第二节将会详细说明
1 |
< a href = "javascript:void(0);" class = "button" >上传照片</ a > |
2 |
< input type = 'text' name = "path" readonly> |
1.2、实现预览在线编辑
这里我们主要使用了一个插件进行图片编辑,如果需要具体查看学习可查看网址
http://odyniec.net/projects/imgareaselect/,使用方法还是很简单方便的。
01 |
$( '#biuuu' ).imgAreaSelect({ |
02 |
aspectRatio: '1:1' , //截取比例 |
04 |
resizable: true , //是否可调整大小 |
05 |
autoHide: false , //选择框选择完毕是否自己取消 |
07 |
key: true , //是否启用键盘,默认为false |
08 |
//x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域,原始的 |
09 |
//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标 |
10 |
keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小 |
11 |
//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框 |
12 |
onSelectChange:preview //选框移动时触发的事件 |
13 |
//onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件 |
代码1-2
代码1-2主要是设置需要编辑图片的一些插件属性,具体查看插件的参量说明。
首先我们需要创建一个预览小图片在img之后
1 |
$( '<div><imgid="view" src=' +atvatarUrl+ ' style="position: relative;"/></div>' ) |
8 |
}).insertAfter( '#biuuu' ); //把新建元素放到 #biuuu 之后 |
代码1-3
代码1-3是创建一个小预览图片在img之后
1.3、实现在线预览功能
01 |
function previewImage(file) |
03 |
var porImg = $( '#biuuu' ), //首先获取大图片jquery对象 |
04 |
viewImg = $( '#view' ); //小图片jquery对象 |
05 |
//判断该浏览器是否为w3c标准,既非IE浏览器 |
06 |
if (file[ "files" ] && file[ "files" ][0]) |
08 |
//使用JavaScript的FileReader对象来读取本地数据,并且将数据结果赋值给image的src,具体该对象如何实现的还未深入研究 |
09 |
var reader = newFileReader(); |
10 |
reader.onload = function (evt){ |
11 |
porImg.attr({src :evt.target.result}); |
12 |
viewImg.attr({src: evt.target.result}); |
14 |
reader.readAsDataURL(file.files[0]); |
17 |
function previewImage(file) |
19 |
var porImg = $( '#biuuu' ), //首先获取大图片jquery对象 |
20 |
viewImg = $( '#view' ); //小图片jquery对象 |
21 |
//判断该浏览器是否为w3c标准,既非IE浏览器 |
22 |
if (file[ "files" ] && file[ "files" ][0]) |
24 |
//使用JavaScript的FileReader对象来读取本地数据,并且将数据结果赋值给image的src,具体该对象如何实现的还未深入研究 |
25 |
var reader = newFileReader(); |
26 |
reader.onload = function (evt){ |
27 |
porImg.attr({src :evt.target.result}); |
28 |
viewImg.attr({src: evt.target.result}); |
30 |
reader.readAsDataURL(file.files[0]); |
32 |
//如果是IE浏览器,采用滤镜效果,进行显示,但特别注意的是该滤镜效果使用的对象是div对象,并非img对象,因此我们需要将原有的img对象remove同时生成新的div对象,并且赋值相应的class和id |
36 |
var ieImageDom =document.createElement( "div" ); |
37 |
var proIeImageDom =document.createElement( "div" ); |
38 |
//设置对象的css属性和原有的img对象属性相同,添加相应的id属性值 |
45 |
}).attr({ "id" : "view" }); |
46 |
$(proIeImageDom).attr({ "id" : "biuuu" }); |
47 |
//删除原有img对象,append创建div的dom对象 |
48 |
porImg.parent().prepend(proIeImageDom); |
50 |
viewImg.parent().append(ieImageDom); |
54 |
path =document.selection.createRange().text; |
55 |
$(ieImageDom).css({ "filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")" }); |
56 |
$(proIeImageDom).css({ "filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")" }); |
57 |
// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果 |
这样就可以实现一个图片的在线编辑以及上传在预览功能。
要注意,代码必须要使用客户端访问,例如:http://loacalhost/imgpreview/index.html,不要直接点击index.html访问
代码下载
转自:http://blog.csdn.net/danhuang2012/article/details/7703606
- 图片上传预览,兼容IE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现图片上传预览功能,使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
- JQ实现图片上传预览功能
<input type="file" name="img" id="test1"> <img src="&quo ...
- jquery实现本地图片上传预览和限流处理
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- HTML+Jquery实现多图片上传预览功能
HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...
- 使用ajax,结合jquery,php实现图片上传预览功能
大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...
- js实现图片上传预览功能,使用base64编码来实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
随机推荐
- 关于pthread_cond_wait使用while循环判断的理解
在Stevens的<Unix 环境高级编程>中第11章线程关于pthread_cond_wait的介绍中有一个生产者-消费者的例子P311,在进入pthread_cond_wait前使用w ...
- java资料——哈希表(散列表)(转)
哈希表 散列表(Hash table,也叫哈希表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度. ...
- __attribute__((weak, alias())))
参考gcc的reference: 弱符号: 若两个或两个以上全局符号(函数或变量名)名字一样,而其中之一声明为weak symbol(弱符号),则这些全局符号不会引发重定义错误.链接器会忽略弱符号,去 ...
- 一站式学习Wireshark(二):应用Wireshark观察基本网络协议
TCP: TCP/IP通过三次握手建立一个连接.这一过程中的三种报文是:SYN,SYN/ACK,ACK. 第一步是找到PC发送到网络服务器的第一个SYN报文,这标识了TCP三次握手的开始. 如果你找不 ...
- hdu2222 KeyWords Search AC自动机入门题
/** 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2222 题意:题意:给定N(N <= 10000)个长度不大于50的模式串,再给定一个长度为L ...
- Entity Framework应用:使用LINQ操作
一.什么是LINQ TO EntitiesLINQ,全称是Language-INtegrated Query(集成语言查询),是.NET语言中查询数据的一种技术.LINQ to Entities是一种 ...
- python将数据写入mysql乱码的解决办法
1.错误为:插入乱码 报错: Python模块MySQLdb操作mysql出现2019错误:Can't initialize character set utf-8 解决: 写入数据语句为: cnn ...
- thinkphp 前台测试
配置文件 <?php return array( 'DB_TYPE' => 'mysql', // 数据库类型 'DB_HOST' => 'localhost', // 服务器地址 ...
- Batch Normalization原理及其TensorFlow实现——为了减少深度神经网络中的internal covariate shift,论文中提出了Batch Normalization算法,首先是对”每一层“的输入做一个Batch Normalization 变换
批标准化(Bactch Normalization,BN)是为了克服神经网络加深导致难以训练而诞生的,随着神经网络深度加深,训练起来就会越来越困难,收敛速度回很慢,常常会导致梯度弥散问题(Vanish ...
- PHP与ASP.NET的优劣比较
PHP与ASP.NET的比较 表 1 PHP 4 PHP5 ASP.NET 软件价格 免费 免费 免费 平台价格 免费 免费 $$ 速度 强 强 弱 效率 强 强 弱 安全性 强 强 强 平台 强 强 ...