Question

怎么实现图片上传前预览功能呢？

后缀名为php文件中，实现图片上传，在提交页面前预览图片

Answer 1

预览图片
　　预览功能的基本设计思路：创建一个img元素，再把文件域的value值赋值给img元素的src属性。

<form name="form4" id="form4" method="post" action="#">

<input type="file" name="file4" id="file4" ōnchange="preview4()" />

<img id="pic4" src="" alt="图片在此显示" width="120"/>
</form>

<scrīpt type="text/javascrīpt">

function preview4(){

var x = document.getElementById("file4");

var y = document.getElementById("pic4");

if(!x || !x.value || !y)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

y.src = "file://localhost/" + x.value;

}

else{ alert("您选择的似乎不是图像文件。"); }

}

</scrīpt>

　　试下效果：

　　
　　如果你用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。不知道他们为什么要这么做，我个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。

　　让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：

在Firefox的地址栏中输入“about:config”
继续输入“security.checkloaduri”
双击下面列出来的一行文字，把它的值由true改为false
　　然后你可以再试试上面预览，everything works well！可惜的是我们并不能要求所有的用户都去修改这个值（更不用说修改的过程还挺麻烦），所以这对我们来说毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。

用DOM来创建对象
　　在上面的XHTML代码中，我们为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持Javascrīpt，他不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，我们就需要在“运行时”再生成这个img对象，途径还是DOM。

<form name="form5" id="form5" method="post" action="#">

<input type="file" name="file5" id="file5" ōnchange="preview5()"/>

</form>

<scrīpt type="text/javascrīpt">

function preview5(){

var x = document.getElementById("file5");

if(!x || !x.value)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

var y = document.getElementById("img5");

if(y){ y.src = 'file://localhost/' + x.value; }

else{

var img=document.createElement('img');

img.setAttribute('src','file://localhost/'+x.value);

img.setAttribute('width','120');

img.setAttribute('height','90');

img.setAttribute('id','img5');

document.getElementById('form5').appendChild(img);

}

}

else{ alert("您选择的似乎不是图像文件。"); }

}

</scrīpt>

Answer 2

本地图片，就搞个img，设置他的src就可以实现；
参考如下：

<div class="column " style="width: 400px; margin-left: 200px;" id="imageShow">
<div id="productImageNew">@*用于图片预览*@
</div>
<div id="productImage">
<div class="widget the-common-margin-top" style="height: 400px; border: 1px solid #eeeeee;
padding: 3px;">
<img id="imgHolder" style="max-height: 390px; max-width: 390px;" />
</div>
</div>
</div>
<form id="formImageUpload" name="formImageUpload" method="post" action="/DocTeam/ProductsImage/UploadImage"
enctype="multipart/form-data">
<div id="fileDiv">
<input type="file" id="theFile" name="theFile" size="20" style="cursor: pointer;
width: 65px; height: 60px; position: absolute; filter: alpha(opacity:1); -moz-opacity: 0;
opacity: 0; z-index: 102;" />
</div>
<input type="hidden" name="imageId_hide" id="imageId_hide" />
</form>
<div id="cover" style="position: absolute; background-color: White; z-index: 10;
filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; overflow: auto; width: 400px;">
<input id="selectImage" type="button" style="width: 65px; height: 60px;" value="Select" />
<br />
<br />
<input type="button" value="Upload" id="imageUpload" style="width: 65px; height: 60px;"
disabled="disabled" onclick="javascript:uploadImage();" />
</div>

//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1)
fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
}
var a = document.selection.createRange().text;
// newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
// newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
//newPreview.style.width = 390 + "px";
newPreview.style.height = 390 + "px";
newPreview.style.border = "solid 1px #eeeeee";
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
// tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
newPreview.style.display = "block";
tempDivPreview.style.display = "none";

}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}

function setTheFileButton_Cover_SelectImageButton() {
// debugger;
// var position = $("#selectImage", "#cover").position();
// var css = { top: position.top, left: position.left };
// $("#theFile", "#fileDiv").css(css);
}

var $imgHolder = $('#imgHolder', "#productImage");
var tempDiv = $("#temp_div");
$("#select", "#cover").click(function () {
$("#theFile", "#fileDiv").click().select();
});
$("#theFile", "#fileDiv").click(function () {
$(this).blur();
});
$("#theFile", "#fileDiv").change(function () {
PreviewImage(this, 'imgHolder', 'productImage');
setTheFileButton_Cover_SelectImageButton();
// alert("预览已生成!");
$("#imageUpload").prop("disabled", false);
});