图片上传时即时生成多个缩略图
生活随笔
收集整理的這篇文章主要介紹了
图片上传时即时生成多个缩略图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在網上找了不少案例，都沒有我理想的代碼，我就根據其中一個改編成自己想要的功能，先附上最終效果。
代碼如下，不難的，另外要加上jquery.js代碼就可以了：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"src="${pageContext.request.contextPath}/common/bootstrap/js/jquery.js"></script><title>彈窗提示</title> <script language="javascript" type="text/javascript"> var i=1; //下面用于圖片上傳預覽功能 function setImagePreview(avalue) {html = "<td width='100px;'><img id='preview"+i+"' src='' width='100' height='100' style='display: block;border: 1px solid blue;' /></td>"$("#localImag").append(html);//inputvar docObj = document.getElementById("doc");//imgvar imgObjPreview = document.getElementById("preview"+i);//divvar divs = document.getElementById("localImag");if (docObj.files && docObj.files[0]) {//火狐下，直接設img屬性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '100px';imgObjPreview.style.height = '100px';//imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);i++;} else {//IE下，使用濾鏡docObj.select();var imgSrc = document.selection.createRange().text;var localImagId = document.getElementById("localImag");//必須設置初始大小localImagId.style.width = "100px";localImagId.style.height = "100px";//圖片異常的捕捉，防止用戶修改后綴來偽造圖片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();i++;}return true; } </script> </head><body><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="center" style="padding-top:10px;"><form method="get" action="xznetwork" name="textfile"><input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" οnchange="javascript:setImagePreview();"> </form></td><tr id="localImag"></tr></tr></tbody></table> </body> </html>總結
以上是生活随笔為你收集整理的图片上传时即时生成多个缩略图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Java编程思想》《Think in
- 下一篇： 解析字符串，每8位将2进制转为16进制