jsp圖片上傳預覽
預覽，不能簡單的用<img>，然後把地址賦給src的，會出現瀏覽器不兼容問題
用css濾鏡，像下面
document.getElementById("previewImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + o.value + "')";
至於如何上傳，struts2很方便的
『貳』 jsp+servlet 上傳圖片並顯示出來
其實你這個擋也顯示圖片其實很簡單的，
你的需求無非是兩個
1.servlet上傳文件（圖片）
2.點擊 瀏覽 圖標，然後選擇圖片文件，然後就可以在頁面中的某個地方看到圖片
是這兩個需求么？
首先說第二個吧。
你上傳圖片之後，就馬上觸發js函數，內容為
var PicPath = document.getElementById("yourfile").value;
document.getElementById("yourDiv").innerHTML="<IMG src="+PicPath+"/>";
OK了
第一個嘛就無所謂說了，不過我還是貼一個代碼吧，
public void upLoadFile(HttpServletRequest request, HttpServletResponse response) {
PrintWriter out = null;
response.setCharacterEncoding("UTF-8");
//實例化文件工廠
FileItemFactory factory = new DiskFileItemFactory();
//配置上傳組件ServletFileUpload
ServletFileUpload upload = new ServletFileUpload(factory);
try {
out = response.getWriter();
//從request得到所有上傳域的列表
List<FileItem> list = upload.parseRequest(request);
for (FileItem item : list) {
//isFormField判斷一個item類對象封裝的是一個普通的表單欄位還是文件表單欄位。
// 如果item是文件域，則做出如下處理：
if (!item.isFormField()) {
//上傳文件域的Name
String fileName = item.getName();
//截取擴展名
int idx = fileName.lastIndexOf(".");
String extension = fileName.substring(idx);
//獲取文件名
String name = new Date().getTime() + extension;
//得到文件夾的物理路徑
String path = this.getServletContext().getRealPath("\\upload");
//創建一個File
File file = new File(path + "\\" + name);
FileOutputStream o = new FileOutputStream(file);
InputStream in = item.getInputStream();
try {
LoadProcessServlet.process = 0;
LoadProcessServlet.total = 100;
LoadProcessServlet.isEnd = false;
LoadProcessServlet.total = item.getSize();
byte b[] = new byte[1024];
int n;
while ((n = in.read(b)) != -1) {
LoadProcessServlet.process+=n;
o.write(b, 0, n);
System.out.println("實際："+LoadProcessServlet.process);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
LoadProcessServlet.isEnd = true;
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
『叄』 jsp上傳圖片後如何實現預覽
使用到jsp頁面的一個標記中使用
<img src="要顯示的圖片">標記就可以了
『肆』 如何在jsp中預覽struts上傳的圖片
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Inserttitlehere</title>
</head>
<scripttype="text/javascript">
//顯示圖片的js
functionviewimg(){
varimgup=document.getElementById("uploadimg");
varimgpath=getPath(imgup);
//判斷是否是圖片格式
varimgname=imgup.value.substring(imgup.value.lastIndexOf("."),imgup.value.length)
imgname=imgname.toLowerCase()
if((imgname!='.jpg')&&(imgname!='.gif')&&(imgname!='.jpeg')&&(imgname!='.png')&&(imgname!='.bmp')){
alert("請選擇圖片文件，謝謝!");
imgup.focus();
//清空file裡面的值
imgup.select();
document.selection.clear();
}
else{
//顯示圖片
document.getElementById("sig_preview").innerHTML="<imgsrc='"+imgpath+"'border=0width=100height=60>"
}
}
//該函數解決iE下路徑問題。兼容ie6，7，firefoxaddbyexceljava2010-1-6
functiongetPath(obj){
if(obj){
if(window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
returndocument.selection.createRange().text;
}elseif(window.navigator.userAgent.indexOf("Firefox")>=1){
if(obj.files){
returnobj.files.item(0).getAsDataURL();
}
returnobj.value;
}
returnobj.value;
}
}</script>
<body>
<s:formaction="fileUpload"namespace="/fileUploadDemo"method="POST"enctype="multipart/form-data">
<s:fileid="uploadimg"size="40"name="upload"onchange="viewimg()"></s:file>
<s:submit/>
</s:form>
<!--顯示的div-->
<divid="sig_preview"></div>
</body>
</html>
『伍』 jsp上傳圖片後怎麼實時顯示出來
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下，使用濾鏡
ocObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必須設置初始大小
localImagId.style.width = "250px";
localImagId.style.height = "200px";
//圖片異常的捕捉，防止用戶修改後綴來偽造圖片
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>
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p><div id="localImag">
<img id="preview" width=-1 height=-1 style="diplay:none" />
『陸』 在jsp中做照片上傳預覽的代碼
建議你使用 Web upload 組件,可圖片預覽, 可多選,可拖放上傳,可粘貼後直接上傳
網路開源產品.
倆三行代碼就可以直接使用
具體網址 :
http://www.admin10000.com/document/4721.html
『柒』 用java寫上傳圖片時，怎麼實現預覽功能
圖片上傳後在網頁上直接讀取上傳後的地址進行預覽，就是說這個時候圖片已經上傳到伺服器了，如果要寫的嚴謹一些，可以在預覽後進行保存操作，如果不保存，則再寫一條語句把上傳上去的文件刪除
『捌』 通過JSP怎樣上傳圖片到伺服器
1.限制文件上傳類型只能是圖片
function checkFileType(name,file){
var extArray = new Array(".doc",".docx");
var allowSubmit = false;
if (!file){
return;
}
while (file.indexOf("\\") != -1){
file = file.slice(file.indexOf("\\") + 1);
}
var ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext){
allowSubmit = true;
break;
}
}
if(!allowSubmit){
alert("只能上傳以下格式的文件:"+ (extArray.join("")) + "\n請重新選擇再上傳.");
document.getElementById(name).value = "";
}
}
其中：extArray是要求文件類型。可自行定義。
2.引入jQuery外部文件
jquery-2.1.4.min.js
3.編寫js代碼
$(function () {
$('#txtfilePath1').uploadReview({
width: 350,
height: 350,
target: '#uploadReview1_content'
});
});
其中：txtfilePath1是input:file。width,height是預覽圖片的寬度和高度。target是顯示預覽圖片的位置。
4.編寫jsp頁面代碼
<body>
<input type="text" class="yourClassName" name="filePath1" id="filePath1"/>
<input type="file" id="txtfilePath1" name="txtfilePath1" style="display:none;">
<input type="button" onclick="txtfilePath1.click()" id="fileup1" name="fileup1" class="searchThing"value="上傳">
</body>
註： 這個是很久以前在網上看到的，就整理了下來，但是這么久都沒用過，所以也沒調試過，你自己試一試研究研究， 再來網上很多博客里，他們寫的很詳細的，可以去看看
『玖』 jsp頁面實現圖片預覽，截取和上傳
比較常用，而且簡單易用的jquery-uploadify插件，支持帶進度的多線程上傳
用到的是flash的跨域上傳模型，這里不用深究
基本文件大致包括
jquery-x.x.x.js
jquery.uploadify.x.js
uploadify.swf
uploadify.css
使用方式：
$(function(){
$("#fileId").uploadify({
width:42,
height:32,
swf:'js/uploadify.swf',
uploader:'upload.do;jsessionid=<%=session.getId()%>',
buttonImage:'image/movetophone_white.png',
fileSizeLimit:2048,
fileObjName:"imgFile",
method:'post',
removeCompleted:true,
fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",
onSelectError:function(file,errorCode,errorMsg){
alert("文件過大");
},
onUploadStart:function(file){
},
onUploadSuccess:function(file,data,response){
alert("上傳完成");
},
onUploadError:function(file,errorCode,errorMsg){
alert(errorMsg);
}
});
});
<inputtype="file"id="fileId"/>另，工程中需要引入commons-fileupload的包。