(2014.11.25 最后更新)

一、碎碎念:关于访问本地图片的路径的问题,比较典型的例子就是上传头像。在以往的解决办法中,我们大多是先将图片上传到服务器然后从服务器返回图片,显示在页面上以达到预览的效果。那到底有没有办法从前端解决这个问题呢?网上也有一些从前端解决的文章,大家的办法都差不多,但是应用到项目中的时候,没有成功过。于是,现在的解决办法是我在前人的基础上进行的改造,希望大家多多提建议和想法,互相学习。

二、上传头像预览

1、首先做好准备工作:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>上传头像</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.z{
border:1px solid #ccc;
padding:10px;
margin-bottom: 30px;
height: 142px;
line-height: 142px;
}
.z img{
width:100%;
}
.zd{
display:none;
}
#con{
width:200px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="con">
<div class="z">
<img id="zy_1" src="4.jpg">
</div>
<input id="input" type="file"/>
</div>
</body>
<html>

我做了一个小的页面,页面元素也很简单,给相应的元素加了样式。

效果如图:

haha,用了我喜欢的动漫做封面~~呐,现在我们可以开始写js部分了。

根据前辈们的总结以及经验,有了以下方法:

<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#zy_1').removeAttr('src');
$('#zy_1').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}else{
var pic_url = getPath(input);
document.getElementById("zy_1").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+pic_url+"')";
}
}
function getPath(obj){
if(obj){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
obj.blur();
return document.selection.createRange().text;
}
}
}
$(function(){
$("#input").change(function(){
readURL(this);
});
});
</script>

是不是觉得看的云里雾里的?没关系,我也是这种想法,但是有一点我们一定要清楚,就是我做红色标记的地方。这个就好像我们在用一款插件,我们没必要去了解插件的每一步实现,但是我们一定要知道这款插件的使用方法。有很多东西都需要我们慢慢的去学习,so,不要着急,现在看不懂,我们就先学会使用方法!

三、上传多张图片

1、这个说起来貌似有点歧义,这里我所说的多张图片≠批量图片上传。与上传头像相同,我们首先做一下准备工作!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.show_container {
overflow: hidden;
padding: 0 2em;
}
.ul_image {
overflow: hidden;
zoom: 1;
}
.ul_image li {
float: left;
width: 60px;
height: 60px;
line-height: 57px;
text-align: center;
list-style: none;
margin: 1em 3em 2em 0;
}
.show_container div {
float: left;
position: relative;
width: 60px;
min-height: 60px;
/* margin: 0em 3em 2em 0; */
}
.showFirst {
border: 1px solid #ddd;
}
.ul_image li img {
max-width: 60px;
max-height: 60px;
vertical-align: middle;
}
.show_container .showFirst span {
position: absolute;
display: inline-block;
width: 18px;
border-radius: 18px;
text-align: center;
left: 50px;
top: -8px;
color: #fff;
background-color: #777d8b;
}
.ul_image li span {
line-height: 18px;
}
.ul_image li span {
line-height: 18px;
}
.uploadImg_bg {
display: inline-block;
background-image: url(upload_bg.png);
position: absolute;
}
.wh {
width: 60px;
height: 60px;
}
.show_container .showLast input {
opacity: 0;
}
</style>
</head>
<body>
<div class="show_container">
<ul class="ul_image">
<li class="up_img">
<div class="showFirst wh">
<img src="test.png" id="up_1">
<span>&times;</span>
</div>
</li>
<li class="up_img">
<div class="showFirst wh">
<img src="2.jpg" id="up_2">
<span>&times;</span>
</div>
</li>
<li>
<div class="showLast wh">
<span class="uploadImg_bg wh"></span>
<input type="file" class="wh" id="test" />
</div>
</li>
</ul>
</div>
</body>
</html>

效果图:

在这个页面中,我给每个图片添加了右上角的小删除按钮,将上传组件进行了美化。其实结构蛮简单的,不要觉得css烟花缭乱,我只是想给大家展示的效果更直观一些,大家只看功能就好!下面我将写上js部分的代码并以注释作为解释~

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
   //当上传的input的值发生变化即有上传的图片的时候,触发function
$(".showLast .wh").change(function() {
var id=$(".up_img").length+1;//我们为每一个上传的图片都动态的分配一个数字,作为组合id之用
     //当上传一个图片的时候,我们将把这个图片动态的追加到上传按钮之前
var $str="<li class='up_img'>"+
"<div class='showFirst wh'>"+
"<img src='' id='up_"+
id+
"'>"+
"<span>×</span>"+
"</div>"+
"</li>";
$(".ul_image>li:last-child").before($str);
readURL(this);//这个方法可以得到图片的真实路径,需要注意的是,这个方法一定要放在change事件的最后,因为要保证动态的追加的li元素已经存在于页面中,然后才可以使用readURL
});
  //右上角删除按钮的功能实现
$(".showFirst span").live("click",function() {
$(this).parent().parent().remove();
if (!$(".ul_image div").hasClass("showFirst")) {
$(".ul_image").empty();
};
});
});
function readURL(input) {//if和else是为了区分不同的浏览器
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var len=$(".up_img").length;//得到当前li的数量,注意此时的li的数量中,已经存在新追加的li,每个li中存在一个img,我们将上传的图片的路径赋给新追加的img的src属性;同时,我们利用len来动态的为追加的元素中的img分配id
$('#up_'+len).removeAttr('src');//移除新追加的img的src(在我看来这个语句在上传多张图片中是可以删掉的,因为新追加的img的src本来就是空的,尊重前辈的成果,放在这里也无影响)
$('#up_'+len).attr('src', e.target.result);//为新追加的元素中的img的src赋值
};
reader.readAsDataURL(input.files[0]);
}else{ var pic_url = getPath(input);
document.getElementById("up_1").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+pic_url+"')";
}
}
function getPath(obj){
if(obj){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
obj.blur();
return document.selection.createRange().text;
}
}
}

原理和上传头像其实是一样的,改成上传多张图片的难点,主要在动态的分配id,其实每个id操作都是一样的,只是操作的对象不同而已。

四、总结:虽然没能完全理解前辈方法的精髓,但是通过自己的努力实现了这样的功能,心里还是有一些小惊喜哒~小小的嘚瑟一下啦!还有一个问题,就是这样的方法我不知道会不会有什么问题,还有很多不足,大家一定要多多的提意见~嗯,今天就到这里了,白白!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2014.11.25 更新

五、接上面,之后发现了一个问题,else中是IE下的解决办法,在上传多张图片的时候其中的id也需要我们来拼字符串处理。修改如下:

function readURL(input) {
var len=$(".up_img").length;//因为if和else中都需要拼串儿,所以我们在这里统一定义
if (input.files && input.files[0]) { var reader = new FileReader();
reader.onload = function (e) {
$('#up_'+len).removeAttr('src');
$('#up_'+len).attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}else{ var pic_url = getPath(input);
document.getElementById("up_"+len).style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+pic_url+"')";
}
}

红色的部分即修改部分。

在本次修改中,我测试了谷歌,火狐,和IE7,均可正常运行。因为我电脑的IE出现问题,使用了同事的电脑,只测试了IE7。有兴趣的童鞋可以IE 8、9都测试一下的哦~

嗯,今天就到这里了,发现问题再来补充,也欢迎童鞋们发现问题与我交流哈~

2016.5.19 今天在群里有小伙伴发了这个网址,附上给大家做参考:http://www.cnblogs.com/fsjohnhuang/p/3925827.html

关于c:\fakepath\的解决办法的更多相关文章

  1. chrome文件上传 /获取文件路径c:/fakepath的解决办法

    jsp页面 <td style="text-align: left;padding-left: 20px;"> <img name="image&quo ...

  2. 懒加载session 无法打开 no session or session was closed 解决办法(完美解决)

           首先说明一下,hibernate的延迟加载特性(lazy).所谓的延迟加载就是当真正需要查询数据时才执行数据加载操作.因为hibernate当中支持实体对象,外键会与实体对象关联起来.如 ...

  3. 使用JSONObject.fromObject的时候出现“There is a cycle in the hierarchy”异常 的解决办法

    在使用JSONObject.fromObject的时候,出现“There is a cycle in the hierarchy”异常.   意思是出现了死循环,也就是Model之间有循环包含关系: ...

  4. logstash file输入,无输出原因与解决办法

    1.现象 很多同学在用logstash input 为file的时候,经常会出现如下问题:配置文件无误,logstash有时一直停留在等待输入的界面 2.解释 logstash作为日志分析的管道,在实 ...

  5. Android权限管理之Android 6.0运行时权限及解决办法

    前言: 今天还是围绕着最近面试的一个热门话题Android 6.0权限适配来总结学习,其实Android 6.0权限适配我们公司是在今年5月份才开始做,算是比较晚的吧,不过现在Android 6.0以 ...

  6. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

  7. UWP开发之Mvvmlight实践六:MissingMetadataException解决办法(.Net Native下Default.rd.xml配置问题)

    最近完成一款UWP应用,在手机端测试发布版(Release)的时候应用莫名奇妙的强行关闭,而同样的应用包在PC端一点问题都没有,而且Debug版在两个平台都没有问题,唯独手机的Release版有问题. ...

  8. 当web.config文件放置在共享目录下(UNC),启动IIS会提示有错误信息500.19,伴随有错误代码0x80070003和错误代码0x80070005的解决办法

    最近遇到一个很有意思的使用环境,操作人员将所有的网站应用内容投放到共享存储里面,并且使用微软的SMB协议将其以CIFS的方式共享出来,使用Windows Server 2008 R2的IIS将其连接起 ...

  9. Nested Loops join时显示no join predicate原因分析以及解决办法

    本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...

随机推荐

  1. 【转】MFC获取程序目录路径方法

    原文网址:http://yeahyuanqing.blog.163.com/blog/static/118025091201149480818/ MFC获得当前应用程序目录的GetCurrentDir ...

  2. 关于The APR based Apache Tomcat Native library警告

    今天在Eclipse上配置Tomcat7,启动时看到如下警告信息: The APR based Apache Tomcat Native library which allows optimal pe ...

  3. Android学习笔记(三)Application类简介

    每次运行APP时,Application类都保持实例化状态.与Activity不同,配置改变不会导致应用程序重启.通过继承Application类,可以完成一下3项工作: · 对Android运行时广 ...

  4. 更改mysql数据库latin1_swedish_ci为utf8

    原文在http://bingu.net/472/latin1_swedish_ci-to-utf8_general_ci/把下列文件保存为一个.php文件,然后运行 <?phpdefine('D ...

  5. 关于android 自己实现 back键 home键

    今天在被问到一个问题的时候突然想要看看这些东西了.因为一直以来,我返回上个界面,和大家普遍的方法都是一样的. 1. finish()本页面. 2. intent 跳转到上个页面. 一 ,在 按下手机上 ...

  6. C语言中数据类型转换的学习

    1. 整型和枚举类型数据的转换 测试代码如下: #include <stdio.h> typedef enum _E_TYPE_T {     E_TYPE_1 = -1,     E_T ...

  7. 容斥原理应用(求1~r中有多少个数与n互素)

    问题:求1~r中有多少个数与n互素. 对于这个问题由容斥原理,我们有3种写法,其实效率差不多.分别是:dfs,队列数组,位运算. 先说说位运算吧: 用二进制1,0来表示第几个素因子是否被用到,如m=3 ...

  8. luajit 安装cjson

    最近需要升级原有服务器的nginx加载逻辑,新的lua脚本需要解析一个远程返回的json格式的结果,原有的luajit并没有带cjson库,需要自己手动安装一下. 基本参考博客luajit安装cjso ...

  9. 各种Markdown处理器的列表

    从MarkdownImplementations - Markdown Community Group可以找到一个实现markdown处理器的列表,如下: Name Language Type Des ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(18)-权限管理系统-表数据

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(18)-权限管理系统-表数据 这一节,我们插入数据来看看数据流,让各位同学,知道这个权限表交互是怎么一个流 ...