js上传图片预览
⑴ 用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 图片上传本地预览
浏览器安全性已经大大提高，要实现图片上传预览不是那么简单了
不过有很多变通或先进的方法来实现
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法
具体可以参考这个图片上传预览效果
⑶ js图片上传 预览效果
用js或者jquery就可以解决：
//内容部分：
<input type="file" id="tu">
<div id="img"></div>
//js代码
<script type="text/javascript">
function tou(){
var f = document.getElementById("tu").files[0];
var src = window.URL.createObjectURL(f);
//src 就是图片的路径
$("#img").html(" 头像预览:<img width='110' height='100' src='"+src+"' >");
}
</script>
⑷ html+js，求个多图片上传预览的代码
这个问题已经困扰我好多年了，html+js不能实现，网上大多是ajax或者flash
⑸ 上传照片，并且马上能预览到缩略图，这用的是哪个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/jquery如何实现一张图片的上传预览功能。。。。
使用AJAX，把文件保存到临时目录，把返回的值（文件路径），放到页面上预先添加的<IMG> 标签中，就可显示预览图片，再点上传才把文件从临时目录（删除临时目录文件）复制到你指定的目录中
⑺ js图片上传直接浏览的代码
<html >
<head>
<title>无标题页</title>
<style type="text/css">#newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)}</style> <script language="javascript" type="text/javascript">
function CheckImg(fileUpload)
{
var mime=fileUpload.value;
mime=mime.toLowerCase().substr(mime.lastIndexOf("."));
if(mime!=".jpg")
{
fileUpload.value="";
alert("仅支持JPG格式！");
}
else
{
var imags=document.getElementsByTagName("img");
for(i=0;i<imags.length;i++)
{
if(imags[i].name=='imagePhoto')
{
imags[i].src=fileUpload.value;
}
}
}
}
</script>
</head>
<body>
<form id="form1">
<table>
<tr>
<td>
<input id="ImagePath" type="file" onchange="CheckImg(this)"/>
</td>
</tr>
<tr>
<td>
<Image ID="imagePhoto" name="imagePhoto" runat="server" Height="180px" Width="230px" /></td>
</tr>
</table>
</form>
</body>
</html>我写的上传直接浏览图片！
⑻ 我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
WebUploader项目，符合你的要求。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重复创建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上传成功，给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上传失败，显示上传出错。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重复创建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
//完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
更多细节，请查看js源码。
⑼ JS怎么实现图片预览效果
//图片上传预览IE是用了滤镜。
functionpreviewImage(file)
{
varMAXWIDTH=260;
varMAXHEIGHT=180;
vardiv=document.getElementById('preview');
if(file.files&&file.files[0])
{
div.innerHTML='<imgid=imghead>';
varimg=document.getElementById('imghead');
img.onload=function(){
varrect=clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
img.width=rect.width;
img.height=rect.height;
//img.style.marginLeft=rect.left+'px';
img.style.marginTop=rect.top+'px';
}
varreader=newFileReader();
reader.onload=function(evt){img.src=evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else//兼容IE
{
varsFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
varsrc=document.selection.createRange().text;
div.innerHTML='<imgid=imghead>';
varimg=document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src=src;
varrect=clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
status=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML="<divid=divheadstyle='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+""'></div>";
}
}
functionclacImgZoomParam(maxWidth,maxHeight,width,height){
varparam={top:0,left:0,width:width,height:height};
if(width>maxWidth||height>maxHeight)
{
rateWidth=width/maxWidth;
rateHeight=height/maxHeight;
if(rateWidth>rateHeight)
{
param.width=maxWidth;
param.height=Math.round(height/rateWidth);
}else
{
param.width=Math.round(width/rateHeight);
param.height=maxHeight;
}
}
param.left=Math.round((maxWidth-param.width)/2);
param.top=Math.round((maxHeight-param.height)/2);
returnparam;
⑽ 怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120">
</form>
</body>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl)
{
$("#img0").attr("src", objUrl);
$("#img0").removeClass("hide");
}
}) ;
//建立一个可存取到该file的url
function getObjectURL(file)
{
var url = null ;
if (window.createObjectURL!=undefined)
{ // basic
url = window.createObjectURL(file) ;
}
else if (window.URL!=undefined)
{
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
}
else if (window.webkitURL!=undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$('input').on('change',function(){
var value = $(this).val();
value = value.split("\\")[2];
alert(value);
})
</script>
</html>