服务器的图片怎显示预览,javascript 实现图片预览（未上传到服务器端）

1，图片预览

越来越多的浏览器为了安全，都不能获得文件的,全路径，实现图片预览实现起来有点麻烦。有人选择复制图片到服务器的某个路径下，然后从服务器端找到路径，实现预览。但这不是最佳实现方案，如果用户一张一张的预览图片，最终服务器里的垃圾图片岂不泛滥了？

2，代码(以下代码兼容主流浏览器，请放心使用)html>

图片预览

#main {

width: 900px;

height: 600px;

margin: 10px auto 0;

}

#preview_text {

width: 900px;

height: 40px;

}

#preview_wrapper{

width: 900px;

height: 500px;

border: 1px solid gray;

}

定义的一些常量，使用时，只需要在这里修改一下，就可以了

后期，作者会继续对代码进行封装，为开发者提供一个接口，供使用！

---------------->

var DIV_ID = "preview";// div

var PREVIEW_ID = "preview_wrapper";

var PIC_WIDTH = 900;// 展示图片的宽度

var PIC_HEIGHT = 500;// 展示图片的高度

var FILE_NAME = "fileName";

var IMAGE_FILE = "p_w_picpathFile";

function $$(id){// 为了方便起见，统一定义一个函数

return document.getElementById(id);

}

function toShowPic(){

doPreview();

setImageName();

}

// 设置图片名称

function setImageName(){

var name = $$(IMAGE_FILE).value;

$$(FILE_NAME).value = name.substring(name.lastIndexOf('\\')+1,name.lastIndexOf("."));

}

// 预览

function doPreview(){

var sender = $$(IMAGE_FILE);

var allowExtention = ".jpg,.bmp,.gif,.png";// 图片支持的格式

var extention = sender.value.substring(sender.value.lastIndexOf(".") + 1).toLowerCase();// 文件的扩展名

var browserVersion = window.navigator.userAgent.toUpperCase();// 浏览器版本

if(allowExtention.indexOf(extention)!=-1){// 包含指定的几种文件类型

if (browserVersion.indexOf("MSIE") > -1) {// IE 浏览器

if (browserVersion.indexOf("MSIE 6.0") > -1) {// ie6

$$(DIV_ID).setAttribute("src",sender.value);

} else {// ie[7-8]、ie9

sender.select();

var newPreview = $$(PREVIEW_ID+ "New");

if (newPreview == null) {

newPreview = document.createElement("div");

newPreview.setAttribute("id", PREVIEW_ID + "New");

newPreview.style.width = PIC_WIDTH;

newPreview.style.height = PIC_HEIGHT;

newPreview.style.border = "solid 1px gray";

}

newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+ document.selection.createRange().text + "')";

var tempDivPreview = $$(PREVIEW_ID);

tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);

tempDivPreview.style.display = "none";

}

}else if (browserVersion.indexOf("FIREFOX") > -1) {// 火狐浏览器

var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);

if (firefoxVersion 

$$(PREVIEW_ID).setAttribute("src",sender.files[0].getAsDataURL());

} else {//firefox7.0+

$$(DIV_ID).setAttribute("src",window.URL.createObjectURL(sender.files[0]));

}

}else if (sender.files) {

//兼容chrome、火狐等，HTML5获取路径

if (typeof FileReader != "undefined") {

var reader = new FileReader();

reader.onload = function(e) {

$$(DIV_ID).setAttribute("src", e.target.result);

$$(DIV_ID).setAttribute("width", PIC_WIDTH);

$$(DIV_ID).setAttribute("height", PIC_HEIGHT);

};

reader.readAsDataURL(sender.files[0]);

} else if (browserVersion.indexOf("SAFARI") > -1) {

alert("暂时不支持Safari浏览器!");

}

}else {

$$(PREVIEW_ID).setAttribute("src",sender.value);

}

}else{

sender.value = ""; // 清空选中文件

$$(FILE_NAME).value="";

alert("仅支持以"+allowExtention+"为后缀的文件!");

if (browserVersion.indexOf("MSIE") > -1) {// IE浏览器

sender.select();

document.selection.clear();

}

sender.outerHTML = sender.outerHTML;

}

}

选择文件 : 

文件名 : 

3，附件

附件部分是图片占位符和html代码，仅供参考。

4,示例图