導航:首頁 > 編程語言 > js上傳圖片和預覽
js上傳圖片和預覽
發布時間：2023-07-03 18:27:52❶ 用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插件
無需插件：
<!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能批量上傳圖片+預覽的功能。急~~~急~~~急~~
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源碼。
❹ 實現下面代碼的上傳圖片並瀏覽的功能，html+js實現，求指教，在線等。。。
單純的 JS 不能實現文件上傳，僅能做預覽（而且還要看瀏覽器的隱私設置是否允許）。
代碼：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>無標題文檔</title>
</head>
<body>
<scripttype="text/javascript">
functionshowImage()
{
//獲取文件路徑
varpath=document.getElementById('upload').value;
//顯示文件路徑
document.getElementById('imgName').innerHTML=path;
//創建img
varimg=document.createElement('img');
//載入圖像
img.src=path;
//插入圖像到頁面中
document.getElementById('imgPrev').appendChild(img);
}
</script>
<tableborder="1"style="width:1000px">
<trclass="midTable1td1"style="height:50px;">
<tdalign="center">圖片描述</td>
<tdalign="center">圖片</td>
<tdalign="center">操作</td>
</tr>
<trclass="midTable1td2"style="height:200px">
<tdid="imgName"class="inputContent"align="center">顯示圖片名</td>
<tdid="imgPrev"align="center">顯示圖片</td>
<tdalign="center"><inputtype="button"name="Submit2"value="刪除"class="button"></td>
</tr>
</table>
<form>
<inputtype="file"id="upload"onChange="showImage()"/>
</form>
</body>
</html>
❺ 如何使用js實現IE9下上傳圖片並預覽
<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);
❻ 上傳圖像後如何預覽 js
方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Firefox3,IE6,IE7,IE8上傳圖片預覽</title>
<styletype="text/css">
#preview_wrapper{
display:inline-block;
width:300px;
height:300px;
background-color:#CCC;
}
#preview_fake{/*該對象用戶在IE下顯示預覽圖片*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{/*該對象只用來在IE下獲得圖片的原始尺寸，無其它用途*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility:hidden;
}
#preview{/*該對象用戶在FF下顯示預覽圖片*/
width:300px;
height:300px;
}
</style>
<scripttype="text/javascript">
functiononUploadImgChange(sender){
if(!sender.value.match(/.jpg|.gif|.png|.bmp/i)){
alert('圖片格式無效！');
returnfalse;
}
varobjPreview=document.getElementById('preview');
varobjPreviewFake=document.getElementById('preview_fake');
varobjPreviewSizeFake=document.getElementById('preview_size_fake');
if(sender.files&&sender.files[0]){
objPreview.style.display='block';
objPreview.style.width='auto';
objPreview.style.height='auto';
//Firefox因安全性問題已無法直接通過input[file].value獲取完整的文件路徑
objPreview.src=sender.files[0].getAsDataURL();
}elseif(objPreviewFake.filters){
//IE7,IE8在設置本地圖片地址為img.src時出現莫名其妙的後果
//（相同環境有時能顯示，有時不顯示），因此只能用濾鏡來解決
//IE7,IE8因安全性問題已無法直接通過input[file].value獲取完整的文件路徑
sender.select();
varimgSrc=document.selection.createRange().text;
objPreviewFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src=imgSrc;
objPreviewSizeFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src=imgSrc;
autoSizePreview(objPreviewFake,
objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight);
objPreview.style.display='none';
}
}
functiononPreviewLoad(sender){
autoSizePreview(sender,sender.offsetWidth,sender.offsetHeight);
}
functionautoSizePreview(objPre,originalWidth,originalHeight){
varzoomParam=clacImgZoomParam(300,300,originalWidth,originalHeight);
objPre.style.width=zoomParam.width+'px';
objPre.style.height=zoomParam.height+'px';
objPre.style.marginTop=zoomParam.top+'px';
objPre.style.marginLeft=zoomParam.left+'px';
}
functionclacImgZoomParam(maxWidth,maxHeight,width,height){
varparam={width:width,height:height,top:0,left:0};
if(width>maxWidth||height>maxHeight){
rateWidth=width/maxWidth;
rateHeight=height/maxHeight;
if(rateWidth>rateHeight){
param.width=maxWidth;
param.height=height/rateWidth;
}else{
param.width=width/rateHeight;
param.height=maxHeight;
}
}
param.left=(maxWidth-param.width)/2;
param.top=(maxHeight-param.height)/2;
returnparam;
}
</script>
</head>
<body>
<divid="preview_wrapper">
<divid="preview_fake">
<imgid="preview"onload="onPreviewLoad(this)"/>
</div>
</div>
<br/>
<inputid="upload_img"type="file"onchange="onUploadImgChange(this)"/>
<br/>
<imgid="preview_size_fake"/>
</body>
</html>
❼ js 圖片上傳本地預覽
瀏覽器安全性已經大大提高，要實現圖片上傳預覽不是那麼簡單了
不過有很多變版通或先權進的方法來實現
例如ie7/ie8的濾鏡預覽法，firefox 3的getAsDataURL方法
具體可以參考這個圖片上傳預覽效果
❽ jsp頁面實現圖片預覽，截取和上傳
比較常用，而且簡單易用的jquery-uploadify插件，支持帶進度的多線程上傳
用到的是flash的跨域上傳模型，這里不用深究
基本文件大致包括
jquery-x.x.x.js
jquery.uploadify.x.js
uploadify.swf
uploadify.css
使用方式：
$(function(){
$("#fileId").uploadify({
width:42,
height:32,
swf:'js/uploadify.swf',
uploader:'upload.do;jsessionid=<%=session.getId()%>',
buttonImage:'image/movetophone_white.png',
fileSizeLimit:2048,
fileObjName:"imgFile",
method:'post',
removeCompleted:true,
fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",
onSelectError:function(file,errorCode,errorMsg){
alert("文件過大");
},
onUploadStart:function(file){
},
onUploadSuccess:function(file,data,response){
alert("上傳完成");
},
onUploadError:function(file,errorCode,errorMsg){
alert(errorMsg);
}
});
});
<inputtype="file"id="fileId"/>另，工程中需要引入commons-fileupload的包。
❾ 怎樣用js或者jq實現點擊這個圖片就可以選擇上傳還有預覽圖片啊
<! 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>
與js上傳圖片和預覽相關的資料
- 網頁框架拆分代碼
- java設計模式應用
- extjstreepanel圖標
- 用友存貨代碼空格
- java生成電影座位
- js函數帶有參數
- java常量類
- promisejs
- 軟體java通用版下載
- java插入字元串
- jsp如何使用斷點調試
- java中字元和字元串
- 九型下載測試源代碼
- javafinal要不要大寫
- 什麼叫銀行交換代碼
- cf代碼283會怎樣
- java導入xls數字帶0
- 程序員男友愛你的表現
- java寫一個shape形狀類
- java程序員全攻略下載
- javapoi配置
- 安卓代碼讀取界面信息
- 哈爾濱市行政區劃代碼
- 程序員比特幣
- 淘寶代碼隱藏導航不見了
- java穩定排序
- 學ui設計要學java嗎
- js怎麼單擊改變標簽里的文字
- 代碼002
- 迅雷下載總出現jsp
- 微信小程序報表控制項
- nodejs處理500頁面
- 一個游戲測試你java基礎是否扎實
- 導入android項目沒有rjava
- js工廠模式
- rs485雙機通信程序
- 小程序獲取二進制圖片
- c語言課程教學視頻java源碼下載
- 51單片機程序寫入
- nodejs6await作用域
- json翻譯成中文
- 程序員培訓生