前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的。百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题。但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实。

/*
*名称:图片上传本地预览插件 v1.1
*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari
*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm
*参数说明:
  Img:图片ID;
  Width:预览宽度;
  Height:预览高度;
  ImgType:支持文件类型;
  Callback:选择文件显示图片后回调方法;
*使用方法:
<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />

把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件

$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});

实例:

jQuery.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
}
//高版本Jquey使用 if ($.support.leadingWhitespace)
if ($.browser.msie) { //低版本jquery中使用的方式
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()
}
})
}
});

调用:

$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});

HTML结构:

<div>
<img id="ImgPr" width="120" height="120" />
</div>
<input type="file" id="up" />

本人发布的插件测试地址:http://www.jq22.com/webqd875

jQuery图片上传前先在本地预览(不经过后端处理)的更多相关文章

  1. jQuery图片上传前先在本地预览

    js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...

  2. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  3. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  4. Thinkphp5+plupload图片上传功能,支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  5. ajax:html5上传文件,上传之前可以实现本地预览

    本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...

  6. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

  7. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  8. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  9. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

随机推荐

  1. CentOS 中 YUM 安装桌面环境(转)

    使用 yum groupinstall 指令很容易就能安装上图形界面的桌面系统. 1. yum 的 group 指令 yum 可以以程序组的模式来安装成套的软件包.支持的软件包可以通过, # yum ...

  2. python运用中文注释时报错解决方法

    写了一段简单的代码,不知 为什么总是报错,后来上网查了一下才知道原因,当用中文进行注释时需要添加如下代码:# coding=utf-8          (注意:该段代码必须放在最前面才能有用,并且 ...

  3. JavaScript作用域链和垃圾回收机制

    作用域链 基本概念: 在了解作用域链和内存之前,我们先了解两个概念,分别是执行环境和变量对象. 执行环境:定义变量或者函数有权访问的其他数据,决定了它们各自的行为.每个对象都有自己的执行环境. 变量对 ...

  4. OpenStack_Glance

    什么是Glace Glance即image service(镜像服务),就是为创建虚拟机提供镜像的地方 为什么要有Glance 这个问题问的好,openstack就是构建Iaas平台对外提供虚拟机的啊 ...

  5. echo print print_r的区别

    echo       PHP语句   效率最高    输出一个或者多个字符串 print()    函数       效率高     只能打印出简单类型变量的值(如int,string) print_ ...

  6. 前端MVC框架之 Angular

    一.什么是Angular jQuery,它属于一种类库(一系列函数的集合),以DOM为驱动核心:而Angular是一种 MVC 的前端框架,则是前端框架,以数据和逻辑为驱动核心,它有着诸多特性,最重要 ...

  7. 1.跨平台开发之~ VSCode开发第一个C程序

    VSCode的安装就不讲了,可以参考这个(http://www.cnblogs.com/dunitian/p/6661644.html) 写一个简单的C,然后F5运行,根据提示来配置文件 删掉前面的内 ...

  8. 【转】Flash字体嵌入方法

    原文链接:http://www.cnblogs.com/ddw1997/archive/2011/11/13/2247546.html 一.如果使用flash cs5.5 1.先新建一个字体fla文件 ...

  9. C# Task 源代码阅读(1)

    平时我们开发中,经常使用Task,后续的.net版本种很多都和Task有关,比如asyn,await有了Task 我们很少就去关注Thread 了.Task 给我们带来了很多的便利之处.是我们更少的去 ...

  10. 【TED】如何掌握你的自由时间

    [TED]如何掌握你的自由时间 生活 某天翻阅自己原来记录的有道云笔记,发现自己在学校的时候,要求自己每周看三个TED视频,并写一些看后的总结,随意翻阅了下,就发现当时做的好的一些笔记,现在一看就能想 ...