jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)
我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html
修改后:
/// <reference path="../../Js/jquery-1.7.2.min.js" />
/*
*使用方法: !!!!!!!!请把input放在图片上方
<div>
<input type="file" id="up" />
<img id="ImgPr" width="120" height="120" /></div>
把需要进行预览的IMG标签外 套一个div 然后给上传控件id给予uploadPreview 然后调用CheckInito 然后点击图片就行了
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}).CheckInito(); var p=$("fff").uploadPreview({});
p.checkFile() //立即弹出file选择文件对话框 ie不适合 */
$.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () { }
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
this.value = "";
return false
}
var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
if (ie) {
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
}) return {
/*ie不适用!*/
checkFile: function CheckFile() {
var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
if (ie) {
_this[0].click();
} else {
var mouseobj = document.createEvent("MouseEvents");
mouseobj.initEvent("click", true, true);
_this[0].dispatchEvent(mouseobj);
}
return _self;
},
//兼容ie8的
CheckInito: function () {
var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
_this.css("position", "absolute");
_this.parent().css("width", opts.Width + "px");
_this.parent().css("height", opts.Height + "px");
if (ie) {
//width: 67.5px; height: 37.4px; padding-right: 5px; position: absolute; opacity: 1;
_this.css("width", opts.Width + "px");
_this.css("height", opts.Height + "px");
_this.css("font-size", "200px");
_this.css("overflow", "hidden");
} else {
_this.css("left", "0px");
_this.css("top", "0px");
_this.css("width", opts.Width + "px");
_this.css("height", opts.Height + "px");
}
_this.css("opacity", "0");
return _self;
}
};
}
});
调用实例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Js/jquery-1.7.2.min.js"></script>
<script src="Admin/js/uploadPreview.js"></script>
<script>
function loadOver() {
$("#myselfpicFile").uploadPreview({ Img: "myselfpic", Width: 150, Height: 180 }).CheckInito();
}
</script>
</head>
<body onload="loadOver();">
<div class="photo">
<input id="myselfpicFile" type="file" name="myselfpic" />
<img width="150" height="180" id="myselfpic" class="" src="../$obj.myselfpic" />
</div>
</body>
</html>
最终效果图
ie:
火狐:
谷歌:
请大家多多支持
jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)的更多相关文章
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- C# Winform学习---MDI窗体的设计,PictureBox控件(图片上一页下一页),Timer控件,MenuStrip控件
一.MDI窗体的设计 1.MDI简介 MDI(Multiple Document Interface)就是所谓的多文档界面,与此对应就有单文档界面 (SDI), 它是微软公司从Windows 2.0下 ...
- jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- JQ上传预览+存数据库
因为之前老师讲的方法有不少BUG 现在经过完善已经修复 之前老是讲的方法是每一张都会被传到后台文件夹里面去 导致在预览过程中如果刷新页面 那么预览的图片不能从后台文件夹中删除 这个方法实现在本地预览 ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- js实现本地的图片压缩上传预览
js在设计时考虑到安全的原因是不允许读写本地文件的,随着html5的出现提供了fileReader AP从而可以I实现本地图片的读取预览功能, 另外在移动端有的限制图片大小的需求,主要是考虑图片过大会 ...
- ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览
//plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...
- C# MVC(File)控件多张图片上传加预览
刚来公司实习,老板叫我写一个积分商城网站.用的是公司的框架结构搭建的后台,所以后台的图片上传不需要自己写.但是前台的评价图片就需要自己手写了,在网上找了很多代码发现都用不了.问了很多人也都没有实现! ...
随机推荐
- mouseenter以及mouseleave兼容性
在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件.有时候,我们需要使用 mouseenter事件来防止子元素的冒泡,这就涉及到事件 ...
- Oracle监控用户索引使用情况,删除无用索引
监控当前业务用户索引 一段时间后查询从未被使用的索引,删除无用索引 停止监控索引 1. 监控当前用户所有索引 得到监控所有索引的语句: select 'alter index ' || index_n ...
- 相克军_Oracle体系_随堂笔记011-事物
数据库主要实现的功能无非是以下三点: ①数据的一致性, ②数据的安全, ③数据的优化. 事物主要影响数据的一致性. 1.事务的基本概念 一组DML语句 insert.delete.up ...
- servlet中用注解的方式读取web.xml中的配置信息
在学习servletContext的时候,我们知道了可以在web.xml中通过<context-param>标签来定义全局的属性(所有servlet都能读取的信息),并在servlet中通 ...
- jQuery.grep()
什么是jQuery.grep()? jQuery.grep()是一个查找满足过滤函数的数组元素的函数.原始数组不受影响,返回值为数组. 用法介绍: 写法: jQuery.grep( array, fu ...
- idea 自动提示生成 serialVersionUID
from: http://tonycody.blog.51cto.com/8421818/1401422 Intellij IDEA 默认没启用这个功能. Setting->Inspection ...
- 一个简单的Webservice的demo,简单模拟服务
前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...
- Linux打包与压缩及tar命令详解
打包和压缩 在linux中,打包和压缩可以说是两个不同的概念,弄清这两个概念对于我们理解复杂的文件后缀有非常大的帮助 打包 将若干个文件和目录打包在一起变成一个大的文件,这时只是简单的打包,所以一 ...
- LINQ(集成化查询)
LINQ可以对数组.集合等数据结构进行查询.筛选.排序等操作:也可以用于与数据库交互:也支持对XML的操作,使用LINQ技术可以动态创建.筛选和修改XML数据和直接操作XML文件. 一). LINQ基 ...
- 不使用jQuery对Web API接口POST,PUT,DELETE数据
前些天,Insus.NET有演示Web API接口的操作: <怎样操作WebAPI接口(显示数据)>http://www.cnblogs.com/insus/p/5670401.html ...