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>