[转]本地图片预览二三事

FROM：http://blog.moocss.com/tutorials/javascript-tutorials/1354.html

 

 

上传图片是我们Web开发经常用到的一个功能，那当然少不了文件域标签的使用，如果是上传的是图片文件能够提前预览就好了。

1

<input type="file"/>

到目前为止，只有IE和FF可以预览本地图片。IE下可以直接浏览本地图片，通过input[type=file]的value属性就可以取到本地图片的路径。
而在FF下，有getAsDataURL()方法可以生成图片的DataURL，然后赋值给img标签。

各种浏览器的支持情况

Internet Explorer & Opera

这两种浏览器返回的值是一样，如果把此站点添加到IE “受信任的站点”列表中，是一个完整的文件的路径。否则就是它：

1

C:\fakepath\image.png

如果还是不理解的话，请看这篇文章《揭露 c:\fakepath 的秘密》。

WebKit (Safari / Chrome)

返回该文件的输入值没有任何价值。

Firefox

Firefox是独特的，它的返回值仅是文件名。不过Firefox提供了一个函数’getAsDataURL（）’方法可以获得图片文件的完整路径。

IE 下效果的JavaScript Code：

1
2
3

document.getElementById("upload").onchange = function() {
	 document.getElementById("image").src = this.value;
}

FF 下效果的JavaScript Code:

1
2
3

document.getElementById("upload").onchange = function() {
	 document.getElementById("image").src = this.files[0].getAsDataURL();
}

IE and FF 的JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
   var ie=!-[1,]
   最短的IE浏览器判断
*/
 
if(-[1,]){
		 document.getElementById("upload").onchange = function() {
	          document.getElementById("image").src = this.files[0].getAsDataURL();
         }
	}else{
		document.getElementById("upload").onchange = function() {
			  document.getElementById("image").src = this.value;
		}
}

jQuery Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

 
  // File target is a <input type="file" />
  $("#file-upload").change(function() {
 
    // Browser supports `files` as part of DOM
    if (this.files) {
 
      //  This works in Firefox, #image-preview is an <img src="" />
      $("#image-preview").attr("src", this.files[0].getAsDataURL());
 
    } else {
 
      // This is just wishful thinking, but it's a security issue so the value of the input is never
      // a true local file path
      $("#image-preview").attr("src", $("#file-upload").val());
 
    }
 
    // Firefox gives you a file name 
    // Safari / Chrome gives you nothing
    // IE / Opera gives you a weird /fakepath/filename.ext
 
    $("#file-upload-area").append($("#file-upload").val());
 
    $("#preview-area").show();
 
  });

Ajax 图片上传

http://www.zurb.com/playground/ajax_upload

图片上传预览，基于JavaScript

posted @ 2012-08-06 09:53  书山瞌睡虫  阅读(253)  评论(0)  编辑  收藏  举报