html input file 屬性怎么能夠選擇之后 馬上預(yù)覽圖片

這個(gè)并不是那么簡(jiǎn)單做出來(lái)的，一般情況下會(huì)加一段iframe代碼，模擬ajax上傳。

創(chuàng)新互聯(lián)公司技術(shù)團(tuán)隊(duì)10多年來(lái)致力于為客戶提供成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站設(shè)計(jì)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過(guò)多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了千余家網(wǎng)站，包括各類(lèi)中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

代碼很簡(jiǎn)單，如下：

!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";

//圖片異常的捕捉，防止用戶修改后綴來(lái)偽造圖片

try{

localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

}

catch(e)

{

alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!");

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

怎樣用html5實(shí)現(xiàn)拖拽上傳文件

，首先要判斷拖入的文件是否符合要求，包括圖片類(lèi)型、大小等，然后獲取本地圖片信息，實(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; //獲取文件對(duì)象

//檢測(cè)是否是拖拽文件到頁(yè)面的操作

if(fileList.length == 0){

return false;

}

//檢測(cè)文件是不是圖片

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("上傳大小不能超過(guò)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);

});

html5拖拽圖片上傳，怎么獲得圖片原始尺寸

拖拽的過(guò)程就不說(shuō)了，這里主要說(shuō)一下如何在前端獲取到圖片的相關(guān)信息。

html5里有一個(gè)fileReader的全局變量，用來(lái)讀取本地文件，比如txt，img等，下面是一個(gè)簡(jiǎn)單的代碼。

function?checkFile(files){

var?file?=?files[0];

var?reader?=?new?FileReader();

//?show表示div?id='show'/div，用來(lái)展示圖片預(yù)覽的

if(!/image\/\w+/.test(file.type)){

show.innerHTML?=?"請(qǐng)確保文件為圖像類(lèi)型";

return?false;

}

//?onload是異步操作

reader.onload?=?function(e){

show.innerHTML?=?'img?src="'+e.target.result+'"?alt="img"';

}

reader.readAsDataURL(file);

}

這樣就能夠在不上傳到服務(wù)器的前提下預(yù)覽圖片。當(dāng)然，這個(gè)問(wèn)題的重點(diǎn)是獲取圖片的原始尺寸，html5里還提供了兩個(gè)變量來(lái)獲取：naturalWidth和naturalHeight，這兩個(gè)分別來(lái)獲取圖片的原始寬度和原始高度。

在上面的例子中，就能通過(guò)下面的方式獲取到：

var?width?=?e.target.naturalWidth;

var?height?=?e.target.naturalHeight;

還有一種情況就是，如果已經(jīng)存在頁(yè)面里的圖片，怎么獲取到原始尺寸呢，可以這樣：

var?img?=?document.getElementsByTagName('img')[0];?//?獲取到圖片

var?width?=?img.naturalWidth;

var?height?=?img.naturalHeight;

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

隨便寫(xiě)了幾個(gè)效果，沒(méi)有用到JS，不過(guò)要用到JS只要把觸發(fā)事件替換掉上面的hover就行了，比如：

$(".button").click(function () {

。。。

});

這里面用到CSS3，所以請(qǐng)不要用IE11以下的低版本瀏覽器，不然你啥都看不見(jiàn)

html怎么做本地圖片預(yù)覽，考慮兼容性。

下載這個(gè)插件

然后

html：

divimg id="ImgPr" width="120" height="120" //div

divinput type="file" id="up" //div

jq：

$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });

怎么實(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），可能會(huì)發(fā)現(xiàn)什么也沒(méi)有發(fā)生。是的，很不幸Firefox的安全策略不允許我們顯示一個(gè)用戶的本地圖像文件。不知道他們?yōu)槭裁匆@么做，我個(gè)人覺(jué)得圖像文件并不會(huì)造成嚴(yán)重的安全性問(wèn)題。即使是不久前比較熱門(mén)的那個(gè)會(huì)引起Windows崩潰的jpeg文件，要顯示它的前提條件是用戶自己選擇了這個(gè)文件或者你知道這個(gè)文件在用戶硬盤(pán)上的準(zhǔn)確路徑。所以我想這種策略很可能來(lái)自于一個(gè)“懶惰”的開(kāi)發(fā)人員，他并不想多寫(xiě)一些程序來(lái)區(qū)分這個(gè)本地文件是一個(gè)圖像文件還是一個(gè)惡意文件，F(xiàn)irefox對(duì)安全性的要求讓他們有些過(guò)于敏感了。

讓Firefox顯示本地文件的唯一辦法就是修改它的默認(rèn)安全策略：

在Firefox的地址欄中輸入“about:config”

繼續(xù)輸入“security.checkloaduri”

雙擊下面列出來(lái)的一行文字，把它的值由true改為false

然后你可以再試試上面預(yù)覽，everything works well！可惜的是我們并不能要求所有的用戶都去修改這個(gè)值（更不用說(shuō)修改的過(guò)程還挺麻煩），所以這對(duì)我們來(lái)說(shuō)毫無(wú)意義。我們能做的也許就是接受Firefox不能預(yù)覽本地圖片這種“可笑”的局面。

用DOM來(lái)創(chuàng)建對(duì)象

在上面的XHTML代碼中，我們?yōu)榱祟A(yù)覽圖片，事先加入了一個(gè)沒(méi)有設(shè)置src的img對(duì)象。除去不美觀、代碼冗余之外，如果用戶瀏覽器不支持Javascrīpt，他不僅無(wú)法使用這個(gè)功能，還要接受頁(yè)面上一個(gè)永遠(yuǎn)不會(huì)顯示出來(lái)的破圖。要解決這個(gè)問(wèn)題，我們就需要在“運(yùn)行時(shí)”再生成這個(gè)img對(duì)象，途徑還是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

網(wǎng)站欄目：html5上傳圖片預(yù)覽,jquery圖片上傳預(yù)覽
文章來(lái)源：http://chinadenli.net/article33/dsgcjps.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、用戶體驗(yàn)、ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、App開(kāi)發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)