本地图片预览二三事

上传图片是我们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

站点统计