图片上传预览
Ⅰ 怎么实现图片上传前预览功能呢
预览图片
预览功能的基本设计思路：创建一个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.checkloari”
双击下面列出来的一行文字，把它的值由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>
Ⅱ 在用input上传图片时如何在旁边预览
核心思想是： 图片上传成功后，本页面保持不刷新。
核心技巧是： form target
代码：
<iframe id='hydro_emergency_team_uploadPhoto_if' style='display:none' name='send'><html><body>x</body></html></iframe>
<form id='xx' method='post' enctype='multipart/form-data' target='send' action="upload.php">
<input type="file" name="file" />
<input type="submit"/>
</form>
这段代码表示： 表单提交后，本页面不会刷新，仅仅是刷新 iframe 而已
Ⅲ js上传图片并且预览功能
<div >
<div id="headImgPicview">
<img src="" id="headImgPic" width="200" height="auto"/>
</div>
<input type="text" id="headImgShow" name="headImg"
placeholder="图片(.jpg .jpeg .png)" size="40"
pattern="(.jpg$)|(.jpeg$)|(.png)|(.JPG$)|(.JPEG$)|(.PNG$)"
data-foolish-msg="请选择图片！"
value=""
required readonly/>
<div class="am-form-group am-form-file" style="width: 175px">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 选择要上传的图片</button>
<input type="file" id="headImg" onchange="imgcheck('headImg',this)" multiple>
</div>
</div>
//文件动态上传方法+格式判断
function imgcheck(imgid,file){
if(!(/.jpg$/.exec($('#'+imgid).val())||(/.png/.exec($('#'+imgid).val()))||(/.jpeg$/.exec($('#'+imgid).val()))
||(/.JPG$/.exec($('#'+imgid).val()))||(/.PNG$/.exec($('#'+imgid).val()))||(/.JPEG$/.exec($('#'+imgid).val())) )){
alert("图片格式不正确！应为：.jpg .jpeg .png");
$('#'+imgid).val('');
}else{
var imgURL = document.getElementById(imgid);
$('#'+imgid+'Show').attr('placeholder',imgURL.value);
//调用图片预览
previewImage(imgid+'Pic',file);
Ⅳ 我上传图片时，网页显示不了上传的预览
会不会是文件太大了，选择100kb左右的jpg格式的试试。
Ⅳ 上传照片，并且马上能预览到缩略图，这用的是哪个js插件
无需插件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>
Ⅵ js 图片上传本地预览
浏览器安全性已经大大提高，要实现图片上传预览不是那么简单了
不过有很多变通或先进的方法来实现
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法
具体可以参考这个图片上传预览效果
Ⅶ 用js、jquery如何实现上传图片的预览
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//获得表单元素
HttpPostedFile oFile = context.Request.Files[0];
//设置上传路径
string strUploadPath = "temp/";
//获取文件名称
string fileName = context.Request.Files[0].FileName;
补充：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
Ⅷ js/jquery如何实现一张图片的上传预览功能。。。。
使用AJAX，把文件保存到临时目录，把返回的值（文件路径），放到页面上预先添加的<IMG> 标签中，就可显示预览图片，再点上传才把文件从临时目录（删除临时目录文件）复制到你指定的目录中
Ⅸ php图片上传前预览怎么实现！！
1.先创建一个file表单域，我们需要用它来浏览本地文件。
<form name="form1" id="form1" method="post" action="upload.php">
<input type="file" name="file1" id="file1" />
</form>
2.试下效果：
判断文件类型：
当用户选择了一个图片文件时，希望他能马上看到这张图片的缩略图，以便他能确认没有把自己的光屁股照片当作头像传到服务器上^_^。
在预览之前还得先判断一下用户选择的是不是一个图像文件，如果他想用一个.rar文件做头像的话我们也需要礼貌地提醒一下。
<form name="form2" id="form2" method="post" action="upload.php">
<input type="file" name="file2" id="file2"
onchange="preview()" />
</form>
Javascript函数实现，注意使用DOM方法getElementById来访问对象。不要再使用form
和input的name属性来访问对象了，只有IE才这么干。<script type="text/javascript">
function preview2(){
var x = document.getElementById("file2");
if(!x || !x.value) return;
if(x.value.indexOf(".jpg")<0
&& x.value.indexOf(".jpeg")<0
&& x.value.indexOf(".gif")<0){
alert("您选择的似乎不是图像文件。");
}else{
alert("通过");
}
}
</script>
3.试下效果：
这里有一个问题，如果用户选择了名为“fake.jpg.txt”的文件，这段脚本仍旧会认为这是一个合法的图像文件。一个可行的解决方案是先 把文件名转换成小写，再取文件路径的最后4到5位，判断一下文件的扩展名是否确为支持的图像文件扩展名。不过这种方案略显笨拙，也没有什么美感可言， 我们换一种方案：用“正则表达式”来判断文件扩展名。
<script type="text/javascript">
function preview3(){
var x = document.getElementById("file3");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
alert("通过");
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>
4.看看效果（可以自己创建一个“fake.jpg.txt”文件试试）：
回到这段脚本上来，即使你还看不懂正则表达式那两行，但整段脚本的美感还是很明显的：简洁、直接、语义流畅，这与Web标准关于XHTML的要求是一致的，与Web设计师或开发者天生的“完美”主义也是一致的。
jjww一大段之后，转入重点——预览图片
预览功能的基本设计思路是很清晰的：创建一个img元素，再把文件域的value值赋值给img
元素的src属性。<form name="form4" id="form4" method="post" action="#">
<input type="file" name="file4" id="file4"
onchange="preview4()" />
<img id="pic4" src="http://blog.163.com/lgh_2002/blog/" alt="图片在此显示" width="120"/>
</form>
<script type="text/javascript">
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("您选择的似乎不是图像文件。");
}
}
</script>
5.试下效果：
如果用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许显示一个用户的本地 图像文件。不知道为什么要这么做，个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文 件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，并 不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。
让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：
在Firefox的地址栏中输入“about:config”
继续输入“security.checkloari”
双击下面列出来的一行文字，把它的值由true改为false
然后你可以再试试上面预览，everything works well！可惜的是并不能要求所有的用户都去修改这个值（更不用说修改的过程还挺麻烦），所以毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。
用DOM来创建对象
在上面的XHTML代码中，为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持 Javascript，不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，就需要在“运行时”再生成这个img对 象，途径还是DOM。
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5"
onchange="preview5()"/>
</form>
<script type="text/javascript">
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("您选择的似乎不是图像文件。");
}
}
</script>
6.试下效果：
这样就相对比较完美了。DOM和正则表达式一样，都是“包你不悔”的实 用技术，如果你希望更多了解、深入学习、或者顺利实践Web标准，DOM是不可或缺的。从本人最近的体会来说，Javascript+DOM+CSS蕴 藏着强大的能量，就看怎么释放它了。
7.最后帖上JQUERY的上传预览代码：
de><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/jquery.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="http://blog.163.com/lgh_2002/blog/' + this.src + '" />').show();
}).mouseout( function(){
ei.hide("slow");
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>de>
Ⅹ 当上传图片的时候,通过双击或者打开图片就自动可以预览到
使用FileUpload上传图片的时候，通过双击或者打开图片后，自动可以进行预览，而不需要点击上传。