js上傳縮略圖
❶ js input file文件上傳圖片並展示
1 頁面HTML內容
2 獲取input[file]元素
3 對獲取的file元素操作，也就是操作fileReader屬性
1：Blob
2: File
3: FileList
4: FileReader
FileList ：
這里，默認狀態下選擇文件 每次files屬性上FileList對象里只有一個file文件。
file對象中包含了name 文件名; size ; type 文件類型; lastModified 最後修改時間；
FileReader：非同步讀取本地文件內容；包括File 和Blob ；
創建FileReader對象;讀取file文件
關於fileReader的幾個屬性：
FileReader.error 只讀一個 DOMException 代表在讀取文件中出現的錯誤。 FileReader.readyState 只讀一個數字表明的狀態FileReader。這是以下之一：
FileReader.result 只讀文件的內容。該屬性僅在讀取操作完成後才有效，並且數據的格式取決於使用哪種方法來啟動讀取操作。
fileReader的幾個事件處理程序：
1 . FileReader.onbort:在讀取操作中止時觸發。
2 . FileReader.onerror:在讀取操作遇到錯誤時觸發。
3 . FileReader.onload:在讀取操作成功完成時觸發。
4 . FileReader.onloadstart:在開始閱讀時觸發。
5 . FileReader.onloadend:無論是否成功 只要讀取操作完成都會觸發。
6 . FileReader.onprogress:閱讀Blob內容時觸發。
FileReader的方法：
1 . FileReader.abort();中止讀取操作
2 . FileReader.readAsArrayBuffer();完成時result屬性包含ArrayBuffer表示文件數據
3 . FileReader.readAsBinaryString();完成時result屬性將包含來自文件的原始二進制數據作為字元串。
4 . FileReader.readAsDataURL();完成時result屬性包含data：表示文本數據的URL；
5 . FileReader.readAsText();完成時result屬性包含文本的內容作為文本字元串。
❷ 如何用html實現按鈕上傳圖片，並且圖片縮略圖顯示在按鈕上方
+分採納
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div></div>
<input type="file" multiple="multiple" onchange="upload(event)">
</body>
</html>
<script type="text/javascript">
const [el,stage] = [
document.querySelector('input'),
document.querySelector('div'),
]
function upload({target}){
if(!target.files.length) return;
for(const file of target.files){
const img = new Image();
img.src = URL.createObjectURL(file);
stage.appendChild(img);
}
}
</script>
❸ 上傳照片，並且馬上能預覽到縮略圖，這用的是哪個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>
❹ 怎麼在前端生成縮略圖，只上傳縮小後的圖片
需要瀏覽器支持html5。
用FileReader讀取本地文件，再用Image載入此文件並縮放繪制到canvas上。最後canvas.ToDataURL()取得縮放後文件的Base64編碼，將此編碼上傳到服務端，解碼為byte[]後，寫入文件。
❺ 怎樣用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>
❻ 用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即可。
