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的包。