<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<script?type="text/javascript">
????//下面用于多圖片上傳預(yù)覽功能
????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])?{
????????????????//火狐下，直接設(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[i]);
????????????}
????????????else?{
????????????????//IE下，使用濾鏡
????????????????docObj.select();
????????????????var?imgSrc?=?document.selection.createRange().text;
????????????????alert(imgSrc)
????????????????var?localImagId?=?document.getElementById("img"?+?i);
????????????????//必須設(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>
<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>這段代碼 , 我點(diǎn)上傳圖片后會(huì)顯示縮略圖 , 可縮略圖的源文件我按F12 ( 本地和服務(wù)器都 ) 找不到~問(wèn) : 這縮略圖的源文件去哪了 ?這是什么技術(shù) ?有沒(méi)有相關(guān)的視頻教材 ?
關(guān)于html儲(chǔ)存功能的問(wèn)題 ( 如果我沒(méi)猜錯(cuò)的話... )
hhhzihao2
2016-06-09 15:29:08
