建站
咨詢
售后
建站咨詢
新聞中心
html5拖拽圖片上傳，怎么獲得圖片原始尺寸
拖拽的過程就不說了，這里主要說一下如何在前端獲取到圖片的相關(guān)信息。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比武漢網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式武漢網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋武漢地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。
html5里有一個(gè)fileReader的全局變量，用來讀取本地文件，比如txt，img等，下面是一個(gè)簡單的代碼。
function?checkFile(files){
var?file?=?files[0];
var?reader?=?new?FileReader();
//?show表示div?id='show'/div，用來展示圖片預(yù)覽的
if(!/image\/\w+/.test(file.type)){
show.innerHTML?=?"請確保文件為圖像類型";
return?false;
}
//?onload是異步操作
reader.onload?=?function(e){
show.innerHTML?=?'img?src="'+e.target.result+'"?alt="img"';
}
reader.readAsDataURL(file);
}
這樣就能夠在不上傳到服務(wù)器的前提下預(yù)覽圖片。當(dāng)然，這個(gè)問題的重點(diǎn)是獲取圖片的原始尺寸，html5里還提供了兩個(gè)變量來獲取：naturalWidth和naturalHeight，這兩個(gè)分別來獲取圖片的原始寬度和原始高度。
在上面的例子中，就能通過下面的方式獲取到：
var?width?=?e.target.naturalWidth;
var?height?=?e.target.naturalHeight;
還有一種情況就是，如果已經(jīng)存在頁面里的圖片，怎么獲取到原始尺寸呢，可以這樣：
var?img?=?document.getElementsByTagName('img')[0];?//?獲取到圖片
var?width?=?img.naturalWidth;
var?height?=?img.naturalHeight;
html input file 屬性怎么能夠選擇之后 馬上預(yù)覽圖片
這個(gè)并不是那么簡單做出來的，一般情況下會加一段iframe代碼，模擬ajax上傳。
代碼很簡單，如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleBy：DragonDean/title
script type="text/javascript"
//下面用于圖片上傳預(yù)覽功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files docObj.files[0])
{
//火狐下，直接設(shè)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");
//必須設(shè)置初始大小
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="" 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
怎么實(shí)現(xiàn)圖片上傳前預(yù)覽功能呢？
預(yù)覽圖片
預(yù)覽功能的基本設(shè)計(jì)思路：創(chuàng)建一個(gè)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 = "" + x.value;
}
else{ alert("您選擇的似乎不是圖像文件。"); }
}
/scrīpt
試下效果：
如果你用的是Firefox（或Opera），可能會發(fā)現(xiàn)什么也沒有發(fā)生。是的，很不幸Firefox的安全策略不允許我們顯示一個(gè)用戶的本地圖像文件。不知道他們?yōu)槭裁匆@么做，我個(gè)人覺得圖像文件并不會造成嚴(yán)重的安全性問題。即使是不久前比較熱門的那個(gè)會引起Windows崩潰的jpeg文件，要顯示它的前提條件是用戶自己選擇了這個(gè)文件或者你知道這個(gè)文件在用戶硬盤上的準(zhǔn)確路徑。所以我想這種策略很可能來自于一個(gè)“懶惰”的開發(fā)人員，他并不想多寫一些程序來區(qū)分這個(gè)本地文件是一個(gè)圖像文件還是一個(gè)惡意文件，F(xiàn)irefox對安全性的要求讓他們有些過于敏感了。
讓Firefox顯示本地文件的唯一辦法就是修改它的默認(rèn)安全策略：
在Firefox的地址欄中輸入“about:config”
繼續(xù)輸入“security.checkloaduri”
雙擊下面列出來的一行文字，把它的值由true改為false
然后你可以再試試上面預(yù)覽，everything works well！可惜的是我們并不能要求所有的用戶都去修改這個(gè)值（更不用說修改的過程還挺麻煩），所以這對我們來說毫無意義。我們能做的也許就是接受Firefox不能預(yù)覽本地圖片這種“可笑”的局面。
用DOM來創(chuàng)建對象
在上面的XHTML代碼中，我們?yōu)榱祟A(yù)覽圖片，事先加入了一個(gè)沒有設(shè)置src的img對象。除去不美觀、代碼冗余之外，如果用戶瀏覽器不支持Javascrīpt，他不僅無法使用這個(gè)功能，還要接受頁面上一個(gè)永遠(yuǎn)不會顯示出來的破圖。要解決這個(gè)問題，我們就需要在“運(yùn)行時(shí)”再生成這個(gè)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 = '' + x.value; }
else{
var img=document.createElement('img');
img.setAttribute('src',''+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}
else{ alert("您選擇的似乎不是圖像文件。"); }
}
/scrīpt
基于bootstrup 3可預(yù)覽的html5文件上傳插件怎么用
bootstrap實(shí)現(xiàn)的多種文件上傳插件，可選擇各種文件，解壓后請點(diǎn)擊index預(yù)覽
怎樣用html5實(shí)現(xiàn)拖拽上傳文件
，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然后獲取本地圖片信息，實(shí)現(xiàn)預(yù)覽，最后上傳。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽區(qū)域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認(rèn)瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對象
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實(shí)現(xiàn)預(yù)覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "img src='"+img+"'p圖片名稱："+filename+"/pp大小："+filesize+"KB/p";
$("#preview").html(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
3、javascript+CSS+Html5實(shí)現(xiàn)圖片預(yù)覽（本地和網(wǎng)絡(luò)圖片）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleTransform/title
style type="text/css"
.test-box{
width:600px;
margin:50px auto;}
.pic{
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;}
.top-pic{
position:absolute;
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right;
-webkit-transform:scale(1,1);}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0);
-webkit-transform-origin:bottom left;
opacity: .5;
-webkit-transform:rotate(120deg);
-webkit-transform-origin:bottom left;
}
/style
/head
body
div class="test-box"
img class="pic top-pic" src="test-pic01.jpg" /
img class="pic bot-pic" src="test-pic02.jpg" /
/div
/body
/html
隨便寫了幾個(gè)效果，沒有用到JS，不過要用到JS只要把觸發(fā)事件替換掉上面的hover就行了，比如：
$(".button").click(function () {
。。。
});
這里面用到CSS3，所以請不要用IE11以下的低版本瀏覽器，不然你啥都看不見
文章名稱：html5上傳預(yù)覽,上傳視頻預(yù)覽
文章URL：http://www.ef60e0e.cn/article/dsiisoh.html
