jq 實現照片上傳回顯(支援Firefox和高版本IE,Google反應慢,有大神可以補充)

來源:互聯網
上載者:User

標籤:gid   put   防止   script   rip   圖片   data   asc   orm   

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>By:德馬{這是一個好心人}</title>

<script type="text/javascript">

//下面用於多圖片上傳預覽功能

function setImagePreviews(avalue) {

var docObj = document.getElementById("doc");

var dd = document.getElementById("dd");

dd.innerHTML = "";

var fileList = docObj.files;

for (var i = 0; i < fileList.length; i++) {

 

dd.innerHTML += "<div style=‘float:left‘ > <img id=‘img" + i + "‘ /> </div>";

var imgObjPreview = document.getElementById("img"+i);

if (docObj.files && docObj.files[i]) {

//Firefox下,直接設img屬性

imgObjPreview.style.display = ‘block‘;

imgObjPreview.style.width = ‘150px‘;

imgObjPreview.style.height = ‘180px‘;

//imgObjPreview.src = docObj.files[0].getAsDataURL();

//Firefox7以上版本不能用上面的getAsDataURL()方式擷取,需要一下方式

imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);

}

else {

//IE下,使用濾鏡

docObj.select();

var imgSrc = document.selection.createRange().text;

alert(imgSrc)

var localImagId = document.getElementById("img" + i);

//必須設定初始大小

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>

<div style="margin :0px auto; width:990px;">

<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />

<div id="dd" style=" width:990px;"></div>

 

</div>

</body>

</html>

jq 實現照片上傳回顯(支援Firefox和高版本IE,Google反應慢,有大神可以補充)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.